jQuery и выполнение кода, пока не будет вызвана mouseout - PullRequest
Новая
       31

jQuery и выполнение кода, пока не будет вызвана mouseout

1 голос
/ 14 мая 2010

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

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

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

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

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

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

Ответы [ 2 ]

4 голосов
/ 14 мая 2010

Это довольно просто. 

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

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

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

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

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

2 голосов
/ 14 мая 2010

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

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

$(function(){

  var moveInterval;

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

});
...