jQuery Hover problème

Question

J'ai une structure HTML comme ceci:

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

Et un petit extrait de code jQuery pour effet fadeIn / out:

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

En fin de compte, je veux montrer élément a#zoom en vol stationnaire sur l'élément de ul#carousel li a. Mais il y a des bizarreries sur fadein / hors effet.

Ceci est ma page de travail . Vous pouvez le consulter en ligne.

Alors, comment je peux résoudre ce problème oddness?

Answer 1

Le problème est INTERVENUES parce que lorsque le pointeur de la souris se déplace sur l'icône de zoom, il est pas plus considéré sur le carrousel de sorte que le fadeOut entre en jeu. Lorsque le fadeout termine le pointeur de la souris est tout à coup sur le carrousel de sorte que le fadein recommence.

Je suppose que le comportement étrange est le clignotement de l'icône de zoom.

Pour corriger cela, vous devez annuler la fadeout lorsque la souris se déplace sur l'icône de zoom en ajoutant un gestionnaire d'événements de vol stationnaire à l'icône de zoom lui-même.

Answer 2

Je fixe cette bizarrerie avec ce code:

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

Merci Vincent.