jQuery und die Ausführung von Code, bis mouseout aufgerufen

Question

Guten Tag alle, ich bin mit dem Bau eines Schiebers für unsere Website beauftragt. Hier ist mein Ziel:

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

Ich brauche „Schieber“ links 30px zu einem Zeitpunkt, zu bewegen, wenn ein Knopf ist vorbei schwebte, und rechts 30px, wenn eine andere Taste ist vorbei schwebte.

Mein Problem ist, dass es keine zuverlässige Methode für das Erklären Sie den Code zu sein scheint, dass die Maus nicht verlassen hat die in Frage sind, es sei denn, es ist etwas, das ich nicht zustande denken oder noch lesen. Mit anderen Worten, wenn die Maus die über eine Schaltfläche ist, um den Code zu bewegen „Schieber“ ausgeführt wird links, bis die mouseout genannt wird. Ich bin mir nicht wirklich sicher, wie dies zu tun.

Die einzige Art, wie ich denken kann, ist , um Blick auf den offsetTop und offsetleft und offsetTop DOM Eigenschaften und vergleichen sie mit der Mausposition, als Lauf überprüft, ob die Maus innerhalb der Grenzen ist die Box, und wenn nicht, als es die Ausführung von Code zu stoppen.

Gibt es einen besseren Weg, dies zu tun?

Answer 1

Das ist ziemlich einfach.

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

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

und ähnliche für rechts.

Sie nur Gebrauch hover() brauchen, wenn es etwas gibt, Sie aufhören müssen, wenn die Maus verlässt den Bereich. Ansonsten können Sie einfach das mouseover() Ereignis verwenden.

Hinweis: die tatsächliche Wirkung ich in dort gesetzt haben, ist wahrscheinlich nicht richtig, aber es hängt ganz von der Schieber-Plugin Sie verwenden. Ihre Bedürfnisse angepasst werden.

Answer 2

Sie müssen nicht prüfen, wo die Maus ist, wie das mouseout Ereignis wird ausgelöst, wenn die Maus verläßt das Element.

Um die Bewegung wiederholen zu machen, während die Maus, um das Element schwebt, ein Intervall beginnen, dass Sie aufhören, wenn die Maus verläßt das Element:

$(function(){

  var moveInterval;

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

});