CODEWITHSUNDEEP
jqueryhtml
ehh
ehh

Reputation: 3480

SlideDown only after SlideUp ended

I have this following code. I am trying to SlideDown div2 but only after div1 has ended to SlideUp, how can I do that?

<!DOCTYPE html>
<html>
    <body>
        <h1>slideDown()</h1>
        <input type="button" id="btn" value="slideDown">
        <div id="d1" style="background:red;width:100px;height:100px">This is the Div</div>
        <div id="d2" style="background:blue;width:100px;height:100px;display:none">This is the Div</div> 
        <script src="js/jquery-2.2.0.min.js"></script>
        <script>
            $(document).ready(function ()
            {
                $("#btn").click(function ()
                {
                    $("#d1").slideUp(2000);
                    $("#d2").hide();                         
                    // do it only after slideup has ended                          
                    $("#d1").hide();
                    $("#d2").slideDown(2000);
                });
            });
        </script>
    </body>
</html>

Upvotes: 0

Views: 332

Answers (2)

SoftwareNerd
SoftwareNerd

Reputation: 1905

change your script tag to 

     <script>
  $(document).ready(function()
 {

       $("#btn").click(function()
       {
         $("#d1").slideUp(2000,function(){
                $("#d1").hide();
                $("#d2").slideDown(2000);
         });                    
         });

    });
   </script>

for more reference on slideUp & slideDown event refer this

Upvotes: 2

Roy Bogado
Roy Bogado

Reputation: 4452

You can callback the slideUp.

 $("#d1").slideUp(2000, function(){ $("#d2").slideDown(2000); });

Here a Fiddle

Upvotes: 4

Related Questions