jQuery Hover Problema

Question

Tengo una estructura HTML siguiente:

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

Y un pequeño fragmento de código jQuery para fadeIn / out efecto:

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

Al final quiero mostrar elemento a#zoom cuando se cierne sobre el elemento ul#carousel li a. Pero hay excentricidad en FadeIn / out efecto.

Esta es mi página de trabajo . También se puede ver en línea.

Entonces, ¿cómo puedo solucionar este rareza?

Answer 1

El problema se está produciendo porque cuando el puntero del ratón se mueve sobre el zoom icono que ya no se considera por encima del carrusel por lo que las patadas Fadeout. Cuando el desvanecimiento completa el puntero del ratón es repentinamente sobre el carrusel de modo que el FadeIn comienza de nuevo.

asumo la extraña conducta es un abrir y cerrar del icono de zoom.

Para solucionar este problema, tiene que cancelar el desvanecimiento cuando se mueve el ratón sobre el icono de zoom mediante la adición de un controlador de eventos vuelo estacionario al zoom icono mismo.

Answer 2

He arreglado esta excentricidad con este código:

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

Gracias Vicente.