单击按钮时，使DIV移动到页面的角落

Question

我有四个DIV将页面分成四个部分：

1. 左上
2. 右上
3. 左下
4. 右下

现在我想使用jQuery创建一个动画，触发按钮点击，这样如果用户点击，所有四个div淡出页面，并且到各自的角落，如：

• 左上角的div淡出到页面的左上角
• 右上方淡出右上角等等

我在jQuery中找到了explode方法，但它与我想要的方法不同。

这是一张图片：



因此，如果有人点击该按钮，则所有四个div都淡出到页面的角落，如果再次点击则会再次出现在原始位置。

以下是我的工作：

HTML

<div class="animate" style="float:left;">some text here</div>
<div class="animate" style="float:right;">some text here</div>
<div class="animate" style="top:50%; float:left;">some text here</div>
<div class="animate" style="top:50%; float:right;">some text here</div>

<button>Click here</button>

JS

$('button').click(function(e) {
   $(".div1").toggle( "explode" );
});

或

$('button').click(function(e) {
    $(".div1").fadeToggle(function()
    {
      $(this).animate({"left": "0","top":"0"});
    });
});

但它们都淡出到页面的一角。我不知道错误在哪里。

Answer 1

这应该给你一个开始。将每个div锚定到其角落，然后设置高度，宽度和不透明度：

＆＃13;

＆＃13;

std::function<>

＆＃13;

$('button').click(function() {
  $('.animate').animate({'opacity' : 0,
    'height': 0,
    'width': 0
  }, 1000);
})

＆＃13;

.animate {
  width: 50%;
  height: 50%;
  position: absolute;
}
#topL {
  top: 0;
  left: 0;
}
#topR {
  top: 0;
  right: 0;
}
#bottomL {
  bottom: 0;
  left: 0;
}
#bottomR {
  bottom: 0;
  right: 0;
}

＆＃13;

＆＃13;

＆＃13;