jQuery y la ejecución de código hasta que se llama mouseout

Question

Buenos días a todos, Soy la tarea de construir un deslizador para nuestro sitio. Aquí es mi objetivo:

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

Necesito mover "deslizante" izquierda 30px a la vez cuando un botón se cernía sobre, y 30px derecha cuando otro botón se cernió sobre.

Mi problema es que no parece ser un método fiable para decirle al código que el ratón no ha dejado el son en cuestión, a menos que haya algo que no pienso o leído todavía. En otras palabras, cuando el ratón está sobre el botón, el código se mueva "deslizante" izquierda se ejecuta hasta que el mouseout se llama. No estoy muy seguro de cómo hacer esto.

La única manera que puedo pensar es para ver el offsetTop y propiedades offsetLeft y offsetTop DOM y los comparan con la posición del ratón, que los cheques de ejecución para ver si el ratón está dentro de los límites de la caja, y si no que se detendrá la ejecución de código.

¿Hay una mejor manera de hacer esto?

Answer 1

Esto es bastante fácil.

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

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

y similar para la derecha.

Sólo es necesario el uso hover() si hay algo que tienes que parar cuando las hojas del ratón de la zona. De lo contrario, puede simplemente usar el evento mouseover().

Nota: el efecto real que he puesto ahí probablemente no es correcta, pero depende por completo de la corredera plug-in que está utilizando. Ajuste según sea necesario.

Answer 2

Usted no tiene que comprobar dónde está el ratón, como se ha activado el evento mouseout cuando las hojas del ratón el elemento.

Para que se repita el movimiento mientras esté el ratón el elemento, se inicia un intervalo que se detiene cuando las hojas del ratón del elemento:

$(function(){

  var moveInterval;

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

});