动画，跳跃位置，动画

Question

可以更有效地完成此动画循环吗？我正在尝试使.gameboxcontent向左滑动，然后从右侧滑入。盒子的内容在此动画期间变化。

基本上DIV应该：

1：滑动视图

2：右跳

3：向左滑入视图

// Slide Left
$('.gameBoxContent').animate( {"left": "-950px"}, 400);
// Sure this can be done better
$('.gameBoxContent').animate( {"top": "950px"}, 1);
$('.gameBoxContent').animate( {"left": "960px"}, 0);
$('.gameBoxContent').animate( {"top": "20px"}, 1);
// Slide Right
$('.gameBoxContent').animate( {"left": "20px"}, 400);

Answer 1

尝试删除top动画；将元素.css("left", window.innerWidth + $(this).width())设置为 complete初始回调的视口右侧。animation({left:-950});利用从$.map()循环中返回的一个功能模式；将this对象设置为.animate()中的.gameBoxContent;将settings对象的options应用于.animate()

var settings = [
  [{
    "left": "-950px"
  }, {
    duration: 400,
    complete: function() {
      $(this).css("left", window.innerWidth + $(this).width())
    }
  }],
  [{
    "left": "20px"
  }, {
    duration: 400
  }]
];
$(".gameBoxContent").queue("_fx", $.map(settings, function(options, i) {
  return function(next) {
    return $(this).animate.apply($(this), options).promise().then(next)
  }
})).dequeue("_fx");

.gameBoxContent {
  width: 100px;
  height: 100px;
  background: green;
  position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="gameBoxContent"></div>