Executing a line after finishing of previous line in jquery

Question

I am new to jQuery and I am trying a simple program. In this program what I am trying to achieve is that when I will click the div text then first line will fadeout then it will change background colour and then it will fade in so overall it will give effect of changing colour slowly, but what happening here is when I click the text the line changes colour suddenly then it fades out and then it fades in. So I was wondering if there is a way to make colour changing code execute after execution of fadeout.

my program:

        $(document).ready(function(){
            $("#firstDiv").click(function(){
                //                    $(this).fadeOut(1000);

                $(this).fadeOut(1000);

                $(this).css("background-color", "aqua");

                $(this).fadeIn(1000);


            });
        });
    </script>
</head>
<body>
    <div id="firstDiv" style="background-color: yellowgreen">
        Click Me
    </div>
</body>

score 4 · Answer 1 · edited May 23 '17 at 12:32

You have to put the color changing in a callback passed to fadeOut:

$(this).fadeOut(1000, function() {
    $(this).css("background-color", "aqua");
}).fadeIn(1000);

Everything you put in the callback is executed after fadeOut finished. fadeIn is not executed immediately because effect methods are queued automatically.

But: If you are doing something computational expensive (i.e. it takes time) in the callback and you want to call fadeIn only after this has finished, you have to put fadeIn in the callback too:

$(this).fadeOut(1000, function() {
    $(this)
      .css("background-color", "aqua")
      .fadeIn(1000);
});

Otherwise fadeIn will be called before the callback finished.

Also worth reading in this context: Can somebody explain jQuery queue?

Why does the fading chain automatically but the css change does not? — poke, Mar 14 '11 at 09:37

score 3 · Accepted Answer · answered Mar 14 '11 at 09:41

3

You can use the callback function of fadeOut() like this:

$(this).fadeOut(1000, function(){
    $(this).css("background-color", "aqua").fadeIn(1000);
});

answered Mar 14 '11 at 09:41

Khoa Nguyen

1,319
7
21

score 0 · Answer 3 · answered Mar 14 '11 at 09:37

0

The jQuery queueing API might be worth a look, it's meant to let you queue up a sequence of actions that will be applied to the selected item.

http://api.jquery.com/queue/

answered Mar 14 '11 at 09:37

GordonM

31,179
15
87
129

Executing a line after finishing of previous line in jquery

3 Answers3