Question

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

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

我要减少div1的宽度，同时淡化内容并在结尾处将其销毁，然后我想让它重新出现在div2上，这样我就能拥有不同的内容。

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 demo。

用jquery平滑地破坏div

1 个答案: