Animate，Jump Position，Animate

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()循環中返回的一個函數模式;在.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>