مسج :كيفية إنشاء وظيفة التمرير jQuery؟

Question

أريد إنشاء وظيفتين تتلاشى داخل وخارج عنصر ما.

هذا ما فعلته حتى الآن ، لكن المشكلة في ذلك هي أنه إذا قمت بنقل الماوس أثناء وجودك في العنصر المذهل ، فإنه يبدأ الاهتزاز: | كيف يمكنني أن أجعله لا يهتز والعمل بشكل صحيح؟

<script language="javascript" type="text/javascript">
 function hoverIn(target, speed){
     $(target).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).fadeOut(speed); 
 }
</script>

معاينة مباشرة - تحقق من المشكلة في البث المباشر

Answer 1

أفضل طريقة للقيام بذلك هي استخدام نص غير مزعج، الشيء الرئيسي الذي تريده هو .stop() استدعاء لإيقاف الرسوم المتحركة السابقة، مثل هذا:

<script type="text/javascript">
 function hoverIn(target, speed){
     $(target).stop(true, true).fadeIn(speed); 
 }

 function hoverOut(target, speed){
     $(target).stop(true, true).fadeOut(speed); 
 }
</script>

هذه لا تزال مشكلة لأن mouseover و mouseout إطلاق النار عند الدخول/الخروج من الطفل.لكن، .hover() الاستخدامات mouseenter و mouseleave والتي لا تعاني من نفس المشكلة، وسوف تقضي على مشكلة "الاهتزاز" لديك.

تبدو النسخة غير المزعجة كما يلي:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).fadeIn('fast');
  }, function() {
    $(this).find("ul").stop(true, true).fadeOut('fast');
  });
});​

يمكنك أن ترى هنا, ، أو الإصدار الأقصر:

$(function() {
  $("ul > li").hover(function() {
    $(this).find("ul").stop(true, true).animate({opacity: 'toggle'}, 'fast');
  });
});​

يمكنك اختبار ذلك هنا, ، لاحظ أن كل هذه الأساليب غير المزعجة لا تستخدم أي جافا سكريبت مضمنة، وتعمل مع قوائم فرعية متعددة.