Problema do pau do jQuery

Question

Eu tenho uma estrutura HTML como esta:

<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 um pequeno trecho de código jQuery para efeito de Fadein/Out:

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

No final, eu quero mostrar a#zoom elemento ao passar o mouse ul#carousel li a elemento. Mas há estranheza no efeito de fadein/out.

Esta é a minha página de trabalho. Você pode visualizá -lo online.

Então, como posso consertar essa estranheza?

Answer 1

O problema está ocorrendo porque, quando o ponteiro do mouse se move sobre o ícone do zoom, ele não é mais considerado sobre o carrossel, o desbotamento entra em ação. Quando o desbotamento completa o ponteiro do mouse está subitamente sobre o carrossel para que o fadein comece novamente.

Presumo que o comportamento estranho seja o piscar de olhos do ícone do zoom.

Para corrigir isso, você precisa cancelar o desbotamento quando o mouse se mover sobre o ícone do Zoom, adicionando um manipulador de eventos no zover ao próprio ícone do Zoom.

Answer 2

Corrigi essa estranheza com este código:

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

Obrigado Vincent.