动画，跳跃位置，动画

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回调的complete .animation({left:-950})；利用从$.map()循环中返回的一个函数模式；在.animate()中将this对象设置为.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>

​