مشكلة تحوم jQuery

Question

لدي بنية HTML مثل هذا:

<ul id="carousel" class="jcarousel-skin-photos">
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>

            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>              
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
            <li><a href="images/content/featuredPhoto.jpg"><img src="images/content/featuredPhoto.jpg" alt="Lorem Ipsum Dolor Sit Amet..." /></a></li>
        </ul>


        <a href="javascript:;" id="zoom">Yakınlaştır</a>

ومقتطف رمز jQuery صغير لـ fadein/out effect:

    $('ul#carousel li a').hover(
  function() {
    $('a#zoom').fadeIn('fast');
  }, 
  function() {
    $('a#zoom').fadeOut('slow');
});

في النهاية أريد أن أظهر a#zoom العنصر عند التحوم على ul#carousel li a عنصر. ولكن هناك غرابة على فادين/تأثير.

هذه صفحة عملي. يمكنك مشاهدته على الإنترنت.

فكيف يمكنني إصلاح هذا الغرابة؟

Answer 1

تحدث المشكلة لأنه عندما يتحرك مؤشر الماوس فوق أيقونة التكبير ، لم يعد يتم اعتباره على الكاروسيل ، لذا يبدأ التلاشي. عندما يكمل Fadeout مؤشر الماوس فجأة فوق الكاروسيل حتى يبدأ Fadein مرة أخرى.

أفترض أن السلوك الغريب هو وميض من أيقونة التكبير.

لإصلاح هذا ، يجب عليك إلغاء Fadeout عندما يتحرك الماوس فوق أيقونة التكبير عن طريق إضافة معالج حدث Hover إلى أيقونة التكبير نفسه.

Answer 2

لقد أصلحت هذه الغرابة مع هذا الرمز:

$('a#zoom').mouseover(function() {
    $(this).stop();
});

شكرا فنسنت.