Question

我有~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;
 }
});

Answer 1

我不知道这是否是正确的方法..但无论如何......你需要为数组上的每个div保存以前的left和top位置

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;
 }
});

注意： 此代码未经过测试 ..但您可以尝试

也许您需要将代码包装在$(document).ready(function(){ //code here })

中

Answer 2

如果您正在寻找非JS解决方案。您应该能够使用CSS Transitions来执行此操作。

transition: top 500ms, left 300ms;

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

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

jQuery：动画从多个div中删除样式属性

2 个答案: