Анимация, положение прыжка, анимация

Question

Можно ли сделать этот цикл анимации более эффективным? Я пытаюсь получить .gameBoxContent, чтобы слайд слева, а затем вправо справа. Содержимое окна изменяется во время этой анимации.

В основном ДИВ должен:

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 объект как .gameBoxContent в пределах .animate(); применять options из settings объекта в качестве параметров .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>