CODEWITHSUNDEEP
javascriptjquerycss
ConorReidd
ConorReidd

Reputation: 276

jQuery animation not triggering inside of 'queue' function

I wrote a jQuery function to dynamically fade out, change then fade in text, unfortunately just the final $("span > span").animate({"opacity":"0.6"}); didn't work and i'm not sure why.

The whole script is:

HTML

<div class="catch-text">
    <span>Share your <span style="color:#FF00A3">creativity</span></span>
</div>

var changeText = function changeText() {
                $("span > span").animate({"opacity":"0"},1600, function() {
                    $("span > span").text("passion");
                    $("span > span").animate({"opacity":"0.6"}, 1600, function() {
                        $("span > span").animate({"opacity":"0"}, 1600);
                        $("span > span").queue(function() {
                            $("span > span").text("creativity");
                            $("span > span").animate({"opacity":"0.6"});
                        });
                    });
                });
            }

So after the jquery changes the text to creative (which works) the animation function after doesn't trigger.

Upvotes: 2

Views: 50

Answers (1)

Daniel Diekmeier
Daniel Diekmeier

Reputation: 3434

You don't need queue here, you can just nest another callback into the second animation:

var changeText = function changeText() {
  $("span > span").animate({
    "opacity": "0"
  }, 1600, function() {
    $("span > span").text("passion");
    $("span > span").animate({
      "opacity": "0.6"
    }, 1600, function() {
      $("span > span").animate({
        "opacity": "0"
      }, 1600, function() {
        // second callback
        $("span > span").text("creativity");
        $("span > span").animate({
          "opacity": "0.6"
        });
      });
    });
  });
};

Upvotes: 1

Related Questions