将Div移动到悬停Div（JQuery）的Y位置

Question

我的问题很简单..

左边有一个图像网格，右边有一个“滑块框”。

当我将鼠标悬停在网格上的图像上时，我希望滑块框移动到我悬停的图像的Y位置，这样它们就会水平排列。实现这一目标的最佳方法是什么？

Answer 1

尝试一下： http://jsfiddle.net/smxNE/1/（已更新）

$('#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/

修改：更新以添加对.stop()的调用

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

Answer 2

我想你会发现这会有所帮助：http://api.jquery.com/animate/

Answer 3

假设您正在使用jquery UI滑块？ http://jqueryui.com/demos/slider/

如果左侧有四个图像，Y值为0,50,100,150，则需要为滑块指定高度为150，然后使悬停功能与图像对应的滑块增量相匹配。因此，如果图像2的Y值为50，则您创建了一个包含4个值的滑块，您只需将滑块值设置为4.此示例几乎与您想要的匹配，您只需要使滑块匹配：

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