2013-03-04 143 views
0

我一直在四处寻找这个div是顺利,但我还没有找到它,我有2周的div表TDS:破坏与jQuery

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

我是为了降低DIV1的宽度,而渐行渐远的内容并在最后销毁它,然后我想让它重新出现在div2上,这样我就可以发布不同的内容。

+3

这是一些伟大的HTML。 – 2013-03-04 12:39:16

+1

您应该创建一个示例,也许使用[JSFiddle](http://jsfiddle.net/),这样每个人都可以编辑您的解决方案以获得您的意见结果(并帮助您)。 – Eich 2013-03-04 12:41:55

+0

http://jsfiddle.net/Kktvy/这里我们去 – user2131736 2013-03-04 14:08:59

回答

1

你可以使用jQuery的animate函数。

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

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

如果您希望它在重新出现后立即致电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

+0

谢谢!它们都在td元素中,而div1包含我不想手动删除的其他元素。 – user2131736 2013-03-04 13:21:34