Question

I have the following code:

      $("#myDiv").hover(
          function () {
            $(this).clearQueue().animate({
                backgroundColor: "#d7df23",
                opacity: 0.95
            }, 250).find(".thumb").clearQueue().animate({
                backgroundColor: "#FFF"
            }, 250).attr('src','myIMG.jpg');
            $(this).next("div").clearQueue().fadeIn(150); // THIS MAY BE WHERE THE PROBLEM IS...
          }, 
          function () {
            $(this).clearQueue().animate({
                backgroundColor: "#222",
                opacity: 0.90
            }, 250).find(".thumb").clearQueue().animate({
                backgroundColor: "#000"
            }, 250).attr('src','myIMGup.jpg');
            $(this).next("div").clearQueue().fadeOut(500); // THIS ALSO MAY BE WHERE THE PROBLEM IS...
          }
    );

The first part of the hover function works fine, but as soon as I need to do anything with the next div I get problems. The code above works if you wait for the animations to complete before moving the mouse over and away, but if you mouseout before the animation is finished on hover the next div vanishes and I can’t get it to appear at all.

Any ideas? I think it might have something to do with all the clearQueue’s I have…

EDIT:

Example HTML:

   <div class="container">
                    <div id="myDiv">
                        <img src="myIMGup.jpg" class="thumb" />
                        <h2>The Header</h2>
                    </div>

                    <div>
                            <h3>Popup Header...</h3>
                            <p>Blah Blah Blah...</p>
                    </div>
    </div>

Answer 1

i think you are looking for stop(true, true) or stop(true, false) depending on whether or not you want your animation to be fluid or not…

reference:
http://api.jquery.com/stop/

hope this helps -ck

NEW ANSWER:
use this to hide:

$(this).next("div").stop(true).animate({opacity:0});

and this to show:

$(this).next("div").stop(true).animate({opacity:1});

instead of fadeIn() and fadeOut()

jQuery remembers the start that the opacity is in when you use fadeIn/fadeOut and because you are halting the animation essentially you are “jamming” fadeIn/fadeOut to go to the stopped opacity

hope this helps -ck

MOAR ANSWER!!1! :

if you also need the actual “hide” eg. .display set to 'none'

use it like this:

$(this).next("div").stop(true).show().animate({opacity:1});

and

$(this).next("div").stop(true).animate({opacity:0}, function() { $(this).hide() });

if I were doing this I’d wrap it nicely like this:

$.fn.myFade = function(fadeIn) {
  return this
    .stop(true)
    .show()
    .fadeTo('fast', +!!fadeIn, function() { !fadeIn && $(this).hide(); });
};

$(this).next("div").myFade(true); // show
$(this).next("div").myFade(false); // hide

Fully Functioning Demo Action Activate: http://jsbin.com/isumiw

hope THIS helps lol -ck