Executing a line after finishing of previous line in jquery
<p>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.</p>

<p>my program:</p>

<p>
    
        
        </p>

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

                $(this).fadeOut(1000);

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

                $(this).fadeIn(1000);


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

<p></p>
