سؤال

لدي البرنامج النصي التالي

 <script>
  $(document).ready(function(){
   $("div.mover").hover(function () {
  $("div.hide1").fadeTo("slow", 0.33);

  $("div.hide1").fadeTo("slow", 1);

},function(){
  $("div.hide1").stop();
});
  });
 </script>

 and html page is

<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_01.png" ></div></td>
 </tr>
 <tr>
<td><div class="mover"><IMG SRC="images/buttons_full_02.png"></div></td>
 </tr>
<tr>
<td><div class="mover"><IMG SRC="images/buttons_full_03.png"></div></td>
</tr>
</table>

وظيفتي هي تلاشي الخلفية عند مرور الماوس فوق الزر

لكن المشكلة إذا قمت بحوم الماوس على جميع الأزرار وبعد أن تركت الماوس الرسوم المتحركة تستمر حتى تستمر حتى يكمل جميع معاملاتها.

ما أريده هو:عندما غادر الماوس الأزرار ، تصل الرسوم المتحركة إلى $ ("div.hide1"). fadeto ("Slow" ، 1) ؛و توقف

هل كانت مفيدة؟

المحلول

تعمل وظيفتك الأولية بشكل جيد طالما لم يتم سحب مؤشر الماوس للخارج خلال قسم "المحرك" الثاني (أو الثالث).عندما يحدث ذلك، قد تحصل على العديد من الرسوم المتحركة في قائمة الانتظار على النحو التالي:

mover1.hover-over()
mover2.hover-over()

بشكل افتراضي، الاتصال stop ينهي الرسم المتحرك الحالي فقط - الرسم المتحرك الذي بدأ للمحرك الأول، وليس الرسم المتحرك الموجود في قائمة الانتظار للمحرك الثاني.

يمكنك منع تشغيل الرسوم المتحركة الإضافية عن طريق مسح قائمة انتظار الرسوم المتحركة عند الاتصال stop, ، والذي يقبل معلمة اختيارية clearQueue:

$(document).ready(function(){     
    $("div.mover").hover(function () {
        $("div.hide1").fadeTo("slow", 0.33).fadeTo("slow", 1);
    }, function(){
        // Added stop parameters and added an additional fadeTo,
        // to make sure we get back to 100% opacity.
        $("div.hide1").stop(true).fadeTo("slow", 1);
    });
});
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top