jQuery e execução de código até que o mouseout seja chamado

Question

Bom dia a todos, tenho a tarefa de construir um slider para o nosso site. Aqui está o meu objetivo:

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

Preciso mover "deslizante" para a esquerda 30px em um momento em que um botão é pairado e direita 30px quando outro botão é pairado.

Meu problema é que não parece haver um método confiável para dizer ao código que o mouse não deixou o está em questão, a menos que haja algo em que ainda não pensei ou li ainda. Em outras palavras, quando o mouse está acima do botão A, o código para mover "deslizante" à esquerda é executado até que o mouseOut seja chamado. Não tenho muita certeza de como fazer isso.

A única maneira de pensar em Para observar as propriedades OffsetTop e OffsetLeft e OffsetTrop DOM e compará -las com a posição do mouse, então executar verificações para ver se o mouse está dentro dos limites da caixa e, se não for, interromperá a execução do código.

Existe uma maneira melhor de fazer isso?

Answer 1

Isso é bastante fácil.

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

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

e semelhante à direita.

Você só precisa usar hover() Se há algo que você precisa parar quando o mouse sai da área. Caso contrário, você pode simplesmente usar o mouseover() evento.

Observação: O efeito real que eu coloquei lá provavelmente não está certo, mas depende inteiramente do plugin deslizante que você está usando. Ajuste conforme necessário.

Answer 2

Você não precisa verificar onde está o mouse, como o mouseout O evento será acionado quando o mouse deixar o elemento.

Para fazer o movimento se repetir enquanto o mouse está pairando o elemento, inicie um intervalo que você pare quando o mouse deixar o elemento:

$(function(){

  var moveInterval;

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

});