jQuery و extending رمز حتى يتم استدعاء mouseout

Question

يوم جيد كل شيء ، أنا مكلف ببناء منزلق لموقعنا. هذا هو هدفي:

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

أحتاج إلى تحريك "Slider" ترك 30 بكسل في وقت يتم فيه تحوم الزر ، و 30 بكسل يمينًا عندما يتم تحريك زر آخر.

مشكلتي هي أنه لا يبدو أن هناك طريقة موثوقة لإخبار الكود بأن الماوس لم يترك هو السؤال ، ما لم يكن هناك شيء لم أفكر فيه أو قرأته بعد. بمعنى آخر ، عندما يكون الماوس فوق الزر A ، يتم تنفيذ الكود لتحريك "شريط التمرير" اليسرى حتى يتم استدعاء الماوس. لست متأكدًا حقًا من كيفية القيام بذلك.

الطريقة الوحيدة التي يمكنني التفكير بها هي لإلقاء نظرة على خصائص 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);
  });

});