javascript - 用jquery顺利销毁div

Question

我一直在寻找这个但我没有找到它，我在表 tds 中有 2 个 div：

 __________ __________
|         | |         |
|  Div 1  | |  Div 2  |
|         | |         |
|_________| |_________|

我是在淡出内容的同时减小 div1 的宽度并在最后销毁它，然后我想让它重新出现在 div2 中，这样我就可以对不同的内容进行 css 处理。

Answer 1

您可以使用 jQuery 的animate功能。

$('#div1').stop().animate({
        width:0,
        opacity:0
    }, 1000, function() {
        $(this).remove();
    });

这首先调用stop()停止任何现有的动画。然后它在 1000 毫秒内将元素的宽度和不透明度设置为 0。remove()它最终在#div1动画完成后调用。

如果您希望它在之后立即重新出现，则remove()无需调用。appendTo()在这种情况下，您需要使用：

...
   }, 1000, function() {
       $(this).appendTo($(this).parent());
       /* Remember that the width and opacity are still 0 here, so you'll need to revert the animation when re-displaying it */
   });

这假定您的 HTML 标记类似于以下内容：

<div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

这是一个JSFiddle 演示。