Javascript jQuery：为从多个div中删除样式属性设置动画

我有~33个div，我正在随机设置位置并为这些位置设置动画。这些div最初是在

flex

的帮助下定位的，然后通过将其位置设置为

relative

并更改

left

和

top

值来随机化这些位置。每次点击都会发生这种情况

每次交替单击时，我都希望将div返回到其正常位置。到目前为止，我找到的唯一解决方案是

.removeAttr（'style'）

方法。但是，我希望能够设置它们返回原始位置的动画。这可能吗

代码如下：

var position_checker = false;
$(document).click(function() {
 if(position_checker == false) {
  $('.poster05-text').each(function() {
  var position = $(this).offset();

  $(this).css({
    position: 'relative',
  }, position);

  var docHeight = $(document).height(),
    docWidth = $(document).width(),
    divWidth = 500,
    divHeight = 500,
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

    var posLeft = Math.floor(Math.random() * widthMax);
    var posTop = Math.floor(Math.random() * heightMax);

    // console.log(docHeight, docWidth);

  $(this).animate({
    position: 'fixed',
    left: posLeft,
    top: posTop
  }, 1000 , 'easeInQuint'); 
});
  position_checker=true;
}
else if(position_checker==true) {
$('.poster05-text').each(function() {
$(this).removeAttr('style');
});
position_checker=false;
 }
});

---

我不知道这样做对不对。。但无论如何。。您需要为阵列上的每个div保存以前的

左

和

顶

位置

var position_checker = false , T_L_Positions = [];
$(document).click(function() {
 if(position_checker == false) {
  $('.poster05-text').each(function(i) {
  var position = $(this).offset();

  $(this).css({
    position: 'relative',
  }, position);

  T_L_Positions[i] = new Array(position.top ,position.left);

  var docHeight = $(document).height(),
    docWidth = $(document).width(),
    divWidth = 500,
    divHeight = 500,
    heightMax = docHeight - divHeight,
    widthMax = docWidth - divWidth;

    var posLeft = Math.floor(Math.random() * widthMax);
    var posTop = Math.floor(Math.random() * heightMax);

    // console.log(docHeight, docWidth);

  $(this).animate({
    position: 'fixed',
    left: posLeft,
    top: posTop
  }, 1000 , 'easeInQuint'); 
});
  position_checker=true;
 }
  else if(position_checker==true) {
   $('.poster05-text').each(function(i) {
      $(this).animate({
         position: 'relative',
         left: T_L_Positions[i][1],
         top: T_L_Positions[i][0]
      }, 1000 , 'easeInQuint'); 
   });
position_checker=false;
 }
});

注意：此代码未经测试。。但是你可以试试

---

如果您正在寻找非JS解决方案，可能需要将代码包装在

$（document）.ready（function（）{//code here}）

中。您应该能够使用CSS转换来实现这一点

transition: top 500ms, left 300ms;

这样，您就可以设置和删除位置，并让CSS处理动画

有关更多信息，请查看以下示例：

---

谢谢你的回答。不幸的是，由于

top

和

left

值是通过JS添加的，并且最初不在CSS中，因此transition属性不起作用。谢谢您的回答。不幸的是，虽然这是一个智能解决方案，但div并没有返回到与

flex

框中相同的位置。它们返回的位置中有大量的额外空间。。因此，我的代码是让您了解如何获取左上方的位置，并将其保存在数组中，然后返回。。如果这个主意行得通，其余的都由你来承担。。我不知道你的代码中的

位置：relative

的用途。。你只知道。。因此，在将css更改为相对之前，可以剪切/粘贴数组的行。。而且，您可以继续使用动画样式来达到所需的效果