Цикл анимации JS при возврате, чтобы скрыть элемент

Question

У меня есть элемент, который я оживляю для перемещения по экрану. От left:-100px до left:screen-width. Я петлю это 4 раза.

При возврате элемента в исходное положение left:-100px, я не хочу, чтобы это было видно перемещение по экрану (справа налево) очень быстро.

Я попытался сделать это, сокрыв элемент с помощью .hide(), а затем показывая его через некоторое время (чтобы у него было время вернуться в исходное положение). Но это не работы:

$('.snake-image').hide(); 
$('.snake-image').css('top', height/2).css('left', currentPos); 
setTimeout(function(){$('.snake-image').show();},1000); 

Код:

$('body').append('<a href="#"><img src="https://dl.dropboxusercontent.com/u/48552248/projects/covve/website/2015/public/images/snake.png" class="snake-image" style="position:absolute;top:0;" />'); 

function goRight(currentPos) { 
    $('.snake-image').animate({ 
    left: currentPos 
    }, 100); 
} 

function moveSnake() { 
    while (currentPos <= width) { 
    goRight(currentPos); 
    currentPos += 20; 
    console.log(width + " x " + currentPos); 
    } 
} 

var currentPos, 
    height = $(window).height(), 
    width = $(window).width(), 
    i = 4; 

var intervalID = setInterval(function(){ 
    if (i > 0){ 
    currentPos = -100; 
    $('.snake-image').hide(); 
    $('.snake-image').css('top', height/2).css('left', currentPos); 
    setTimeout(function(){$('.snake-image').show();},1000); 
    moveSnake(); 
    i--; 
    console.log('Interval 1'); 
    } else { 
    clearInterval(intervalID); 
    } 
}, 100); 

Демо: http://jsfiddle.net/m0epjLym/

Answer 1

можно использовать одушевленные callback срабатывает в конце анимации, вы можете переместить деталь назад в Origina положение, а затем снова вызвать анимацию

Fiddle:http://jsfiddle.net/xgknu376/

Answer 2

Вы можете сделать это:

$('.snake-image').animate({'opacity': 0}, 0); 
$('.snake-image').animate({'top': height/2}, 0).animate({'left': currentPos}, 0).delay(1000).animate({'opacity': 1}, 0); 

Функция задержки будет работать только на ite ms, которые находятся в очереди анимации.

Fiddle: http://jsfiddle.net/y995cts3/3/