Problema do pau do jQuery
Pergunta
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?
Solução
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.
Outras dicas
Corrigi essa estranheza com este código:
$('a#zoom').mouseover(function() {
$(this).stop();
});
Obrigado Vincent.