Question

我有以下代码。我正在尝试SlideDown div2，但只有在div1结束到SlideUp之后，我该怎么做？

<!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>

Answer 1

您可以回调幻灯片。

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

这是Fiddle

Answer 2

将脚本标记更改为

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

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

    });
   </script>

有关slideUp＆amp; amp; slideDown事件请参阅this

仅在SlideUp结束后滑动

2 个答案: