Перемещение Div в положение Y в виде наведен Div (JQuery)

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/

EDIT: обновляется, чтобы добавить вызов .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

Answer 4

Не идеально, но это должно дать вам общее представление о том, как это сделать:

http://jsbin.com/unoqi4/edit