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

Question

Hey everyone.

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?

Answer 1

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

Answer 2

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

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

• http://api.jquery.com/animate/
• http://api.jquery.com/offset/
• http://api.jquery.com/mouseenter/

EDIT: updated to add call to .stop()

• http://api.jquery.com/stop/

Answer 3

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

Answer 4

Not perfect, but this should give you the general idea of how to do it:

http://jsbin.com/unoqi4/edit