CODEWITHSUNDEEP
javascriptjquery
Andrew Parisi
Andrew Parisi

Reputation: 514

Moving a Div to the Y position of a hovered Div (JQuery)

My question is simple..

I have a grid of images on the left, and on the right, I have a "slider box".

When I hover over an image on the grid, I want the slider box to move to the Y position of the image I've hovered over, so they line up horizontally. What would be the best way to achieve this?

Upvotes: 2

Views: 476

Answers (3)

user113716
user113716

Reputation: 322502

Try it out: http://jsfiddle.net/smxNE/1/ (updated)

$('#myGrid img').mouseenter(function() {
    var theTop = $(this).offset().top;
    $('#sliderbox').stop().animate({top: theTop}, 500);
});

EDIT: updated to add call to .stop()

Upvotes: 1

Spencer
Spencer

Reputation: 727

Assuming you are using jquery UI slider? http://jqueryui.com/demos/slider/

If you have four images on the left, at Y values of 0, 50, 100, 150, you need to give your slider a height of 150, then make the hover function match the increment of the slider corresponding to the image. So image 2 with Y value of 50, you then created a slider with 4 values, you just set the slider value to 4. This example almost matches what you want, you would just need to make the slider match up:

http://jqueryui.com/demos/slider/#tabs

Upvotes: 0

thomasfedb
thomasfedb

Reputation: 5983

I think you'll find this will help: http://api.jquery.com/animate/

Upvotes: 0

Related Questions