unable to prevent animate queue build up using jquery

Question

I am doing nested animation like following sequence:

• On hover on image1
• Display line 1
• Hide line 1
• Display line 2
• Hide line 2
• (so on for line 3 4 5)

My fiddle: http://jsfiddle.net/z9Unk/119/

I only get the desired behavior if I do hover in controlled fashion. For eg. If I hover only once, I get the behavior as mentioned above.

But if I hover in/out many times fast, I get very inconsistent behaviour. I tried various suggestions on the web but could not make it work.

My expectation is: Even if I hover as many times randomly, I should get the same behavior as I would get if "I hover only once and let the animation complete".

Please help. I am struggling.

HTML:

<div class="hover">
    Hover Me
</div>

<div class="item1">
  <div class="a">
      text for a
  </div>
  <div class="b">
      text for b
  </div>
  <div class="c">
      text for c
  </div>
  <div class="d">
      text for d
  </div>
</div>

CSS:

.hover {
    width: 100px;
    height: 60px;
    border: 1px solid red;
}


.item1 {
    margin:25px;
    width:600px;
    height:400px;
    border:10px solid green; 
}
.a, .c {
  clear: both;
  float:left;
  margin-top: 6%;
  margin-left: 35px;
  opacity:0.0;
  font-size:30px;
}

.b, .d {
  clear: both;
  float:right;
  margin-top: 6%;
  margin-right: 25px;
  opacity:0.0;
  font-size:30px;
}

jQuery:

a = $(".a");
b = $(".b");
c = $(".c");
d = $(".d");


$(".hover").hover(
    function() {
      a.animate({opacity:1.0}, 2000, function()  {
        a.animate({opacity:0.0},3000, function() {
          b.animate({opacity:1.0},2000, function()  {
            b.animate({opacity:0.0}, 3000, function() {
              c.animate({opacity:1.0}, 2000, function()  {
                c.animate({opacity:0.0}, 3000, function() {
                  d.animate({opacity:1.0},2000, function()  {
                    d.animate({opacity:0.0}, 3000, function() {
      }); }); }); }); }); }); });
      }); 
    },
    function() {
        a.opacity(0);  //psuedcode
        b.opacity(0);
        c.opacity(0);
        d.opacity(0);
        a.stop(true, true);
        b.stop(true, true);
        c.stop(true, true);
        d.stop(true, true);
    }
);

Answer 1

I'm not 100% sure what you're trying to do. I mean, I don't know if you want to get stuck on 100% opacity ones or not, but I think my code would be of some help. Let me know more details about the effect you're trying to achieve and I'll update accordingly.

My fiddle: http://jsfiddle.net/z9Unk/126/

And the code:

$(".hover").hover(
    function() {
      a.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
          b.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
              c.fadeTo(2000, 1).fadeTo(3000, 0, function()  {
                  d.fadeTo(2000, 1).fadeTo(3000, 0)
              });
          });
      });
    },
    function() {
        $('.item1 > div').each(function(i, div) {
            $(div).stop(true).fadeTo(0, 0);
        });
    }
);

I also had a stop check in there before, but I just wasn't sure that's the effect you were trying to achieve.

EDIT: I updated the code to be even more compact and also changed the .hide() to .fadeTo(0, 0) so the elements don't jump on the page.

Answer 2

You're going to need another check in there. Something like http://jsfiddle.net/z9Unk/120/.

Essentially, I'm doing the following:

// This is your fallback condition
stopAnimation = false;

$(".hover").hover(
    function() {
      stopAnimation = false;
      a.animate({opacity:1.0}, 2000, function()  {
        // check the stopAnimation value before running the next animation
        ! stopAnimation && a.animate({opacity:0.0},3000, function () { /* etc. */})
      })
    },
    function() {
        stopAnimation = true;
        a.stop(true, true);
        b.stop(true, true);
        c.stop(true, true);
        d.stop(true, true);
    }
);

You may want to also think about setting opacity back to 0 when you stop unless you want the words to just hang out until you hover again.