jQuery Hover Problem

Question

Ich habe eine HTML-Struktur wie folgt aus:

<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>

Und ein wenig jQuery-Code-Snippet für fadeIn / out-Effekt:

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

Am Ende mag ich a#zoom Element zeigen, wenn auf ul#carousel li a Elemente schweben. Aber es gibt oddness auf FadeIn / out-Effekt.

Dies ist meine Arbeit . Sie können ihn unter online ansehen.

So wie ich diese Merkwürdigkeit beheben kann?

Answer 1

Das Problem wird auftreten, weil, wenn der Mauszeiger bewegt sich über das Zoom-Symbol nicht mehr über das Karussell betrachtet wird, so dass die fadeOut Kicks in. Wenn der fadeout den Mauszeiger vervollständigt plötzlich über dem Karussell ist so die FadeIn wieder beginnt.

Ich nehme an das seltsame Verhalten ist das Blinken aus dem Zoom-Symbol.

Um dies zu beheben, haben Sie die fadeout, wenn die Maus bewegt sich über das Zoom-Symbol abzubrechen, indem Sie eine Hover-Ereignishandler dem Zoom-Symbol selbst hinzuzufügen.

Answer 2

Ich reparierte diese Merkwürdigkeit mit diesem Code:

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

Danke Vincent.