jQuery Hover Problem

Question

Hello.

I have a HTML structure like this:

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

And a little jQuery code snippet for fadeIn/out effect:

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

In the end i want to show a#zoom element when hovering on ul#carousel li a element. But there are oddness on fadein/out effect.

This is my work page. You can view it at online.

So how i can fix this oddness?

Answer 1

The problem is occuring because when the mouse pointer moves over the zoom icon it is no longer considered over the carousel so the fadeOut kicks in. When the fadeout completes the mouse pointer is suddenly over the carousel so the fadein starts again.

I assume the odd behaviour is the blink out of the zoom icon.

To fix this you have to cancel the fadeout when the mouse moves over the zoom icon by adding a hover event handler to the zoom icon itself.

Answer 2

I fixed this oddness with this code:

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

Thanks Vincent.