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

你可以这样做：

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

延迟功能仅适用于动画队列中的项目。

小提琴：http://jsfiddle.net/y995cts3/3/

Answer 2

你可以使用动画callback 在动画结束时触发，您可以将项目移回原始位置，然后再次调用动画

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

返回隐藏元素时的JS动画循环

2 个答案: