如何在动画完成后删除元素？

我使用下面的代码来动画一个div。如何在动画完成后删除元素？

<script> 
    $(function() { 
    $("a.shift").click(function() { 
     $("#introOverlay").animate({ 
     height: 0, 
     }, 2000) 
    }); 
    }); 
</script>

动画结束时，我想删除它。我怎样才能做到这一点？

来源

2009-09-16 Martin

animate需要2个参数，可以使你可以这样做：

$("a.shift") 
    .click(function() 
     { 
      $("#introOverlay") 
       .animate({height: 0}, 2000,"linear",function() 
        { 
         $(this).remove(); 
        } 
       ) 
     } 
    );

未经检验。

编辑：测试：这里是完整的网页我用，这将扩展为300像素尽遣更加明显：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
    <head> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      //<![CDATA[ 
      $(document).ready(function() 
      { 
       $(".shift").click(function() 
       { 
        $("#introOverlay") 
        .animate({height: 300}, 2000,"linear",function() 
        { 
         $(this).remove(); 
        }) 
       }); 
      }); 
      //]]> 
     </script> 
    </head> 
    <body> 
    <a class="shift" href="javascript:void(0)">clickme</a> 
    <div id="introOverlay" style="background-color:red;height:200px;">overlay</div> 
    </body> 
</html>

来源

2009-09-16 12:17:02 spender

嗨斯佩德，动画结束时，不会删除元素。 – Martin

完美！谢谢！ – Martin

-3

使用window.timeout的时间与动画所用的时间相同。

来源

2009-09-16 12:07:16

JQuery animate(params, [duration], [easing], [callback])提供了可能添加一个名为每一个动画完成时回调

回调（可选）功能：每当动画完成时才被执行功能，执行一次每个元素都是动画的。

语法是非常简单的jQuery：

<script> 
$(function() { 
    $("a.shift").click(function() { 
     $("#introOverlay").animate({ 
     height: 0, 
     }, 2000, "linear", 
      function() { 
       $("#introOverlay").hide(); 
      } 
     ) 
     }); 

    }) 
</script>

另见本SO question

来源

2009-09-16 12:10:13 Daff

感谢DAFF ，你能给我一些示例代码吗？这是我不明白的语法。 – Martin

查看我链接的问题，那里有一个代码示例（也在这里复制）。基本上你只是将回调函数作为参数传递。 – Daff

把remove()呼叫效果队列是这样的：

$("a.shift").click(function() { 
    $("#introOverlay").animate({ 
    height: 0, 
    }, 2000); 
    $("#introOverlay").queue(function() { 
    $(this).remove(); 
    $(this).dequeue(); 
    }); 
});

来源

2013-03-31 17:54:01

我正在寻找一种方法来更新队列中的文本。这个单词很棒，可以将诸如.text（“”）的非队列调用放入队列中。 –

如何在动画完成后删除元素？

回答

相关问题