单击按钮时隐藏按钮附近的 div答案

【问题标题】：Hide a div near the button when button gets clicked单击按钮时隐藏按钮附近的 div
【发布时间】：2013-02-10 09:33:36
【问题描述】：

好的，所以我有这个 100% 高度和 100% 宽度的 div，并且我在该 div 中设置了居中的按钮。现在，当用户单击该按钮时。我希望 div 在按钮附近折叠并隐藏。这是我的代码。你也可以在 JS Fiddle 上看到

http://jsfiddle.net/ZxB4Z/

$('button').click(function(){
$("div").animate({
  left:'24%',
  top:'48%',
  opacity:'0',
  height:'0px',
  width:'0px'
},'slow');});

【问题讨论】：

你能解释一下“我希望 div 在按钮附近折叠并隐藏”是什么意思吗？
你想让它折叠到按钮所在的地方吗。就像它进入按钮而不是左上角一样？
是的@Leeish，我希望它像慢慢减小它的高度和宽度以及不透明度一样转到按钮。
我认为您需要将绿色 div 包装在另一个 div 中。将绿色 div 设置为以 CSS 为中心。然后它会在中心塌陷。

标签： jquery html css

【解决方案1】：

使用边距而不是位置属性（上/左）：

$('button').click(function(){
    $("div").animate({
        marginLeft:'24%',
        marginTop:'48%',
        opacity:'0',
        height:'0px',
        width:'0px'
    },'slow');
});

或在您的 div 上应用绝对位置：

div { position: absolute }

【讨论】：