jQuery и код выполнения до тех пор, пока мышь не будет вызвана

Question

Добрый день, мне поручено создать слайдер для нашего сайта. Вот моя цель:

<div id="abc"> 
    <div id="slider">...</div> 
</div> 

мне нужно двигаться «ползунок» влево 30px в то время, когда кнопка находится курсор, и правый 30px когда другая кнопка завис над.

Моя проблема заключается в том, что, похоже, нет надежного способа сообщить код, который мышь не оставила, о чем идет речь, если только что-то я не думал и не читал. Другими словами, когда мышь НАВЕРНАЕТ кнопку a, код для перемещения «ползунка» влево выполняется до тех пор, пока не вызывается mouseout. Я не уверен, как это сделать.

Единственный способ, которым я могу думать смотреть на offsetTop и offsetLeft и offsetTop DOM свойства и сравнить их с позиции мыши, чем запустить проверку, чтобы увидеть, если мышь находится в пределах окна, и если нет, то это прекратит выполнение кода.

Есть ли лучший способ сделать это?

Answer 1

Это довольно легко.

var timerID; 
$("#left").hover(function() { 
    timerID = setInterval(slideLeft, 1000); 
}, function() { 
    clearInterval(timerID); 
}); 

function slideLeft() { 
    $("#slider").animate({left: -30}); 
} 

и аналогичные для права.

Вам нужно всего лишь использовать hover(), если вам нужно остановиться, когда мышь покидает область. В противном случае вы можете просто использовать событие mouseover().

Примечание: Фактический эффект, который я установил, вероятно, не прав, но он полностью зависит от используемого вами плагина слайдера. При необходимости отрегулируйте.

Answer 2

Вам не нужно проверять, где находится мышь, поскольку событие mouseout будет запущено, когда мышь покинет элемент.

Для того, чтобы повторить движение в то время как мышь парит элемент, начните интервал, который вы остановить, когда мышь покидает элемент:

$(function(){ 

    var moveInterval; 

    $('#moveLeft').hover(function(){ 
    moveInterval = window.setInterval(function(){ 
     // here you move the slider 
    }, 100); 
    }, function(){ 
    window.clearInterval(moveInterval); 
    }); 

});