jQuery Hover Problema

Question

Ho uno struttura HTML come questo:

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

E un po 'frammento di codice jQuery per fadeIn / out effetto:

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

Alla fine voglio mostrare elemento a#zoom quando si passa sull'elemento ul#carousel li a. Ma ci sono stranezze su fadein / out effetto.

Questa è la mia pagina di lavoro . È possibile visualizzarlo in linea.

Così come posso risolvere questo stranezza?

Answer 1

Il problema è che si verificano perché quando il puntatore del mouse passa sopra l'icona di zoom non è più considerato il carosello in modo che il fadeOut calci. Quando la dissolvenza completa il puntatore del mouse viene improvvisamente sopra il carosello in modo che il fadein ricomincia.

Suppongo che il comportamento strano è un batter fuori l'icona di zoom.

Per risolvere questo problema è necessario annullare la dissolvenza quando il mouse passa sopra l'icona di zoom con l'aggiunta di un gestore di eventi hover all'icona zoom in sé.

Answer 2

Ho fissato questo stranezza con questo codice:

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

Grazie Vincent.