Question

I have the following jQuery:

$("#toolbar").hover(function () {
    $(".logo").fadeOut("slow", function () {
    $(this).addClass("logohover")
        $(this).parent().addClass("logohover").fadeIn("slow", function () {
            $(".logo").fadeIn("slow");
        });
    });

});

<div id="toolbar">
 <div class="logo">
  &nbsp;
 </div>
</div>

When I hover over #toolbar it fades the .logo background out (Background is set in CSS), then changes the class to .logohover and fades it back in with a different background set in the CSS.

However when I then move the cursor off #toolbar and then hover back over the toolbar the .hoverlogo fade’s in and out.

When the <div> is set to .logohover I dont want it to fade out on hover.

How can I adjust my jQuery to achive this? OR adjust my jQuery so I get a better effect?

Answer 1

The problem is that the event handlers are still there and will react accordingly.

You could try adding a check in the event handler to check the element’s class name and abort, i.e.:

if ($('.logo').hasClass('logohover')) return