Velocity.js 触发 fadeOut 但不触发 fadeIn

Question

我有以下代码应该

if($(window).scrollTop()!=0){
        console.log('doout');
        $("#topbottom").velocity("fadeOut", { delay: 500, duration: 1500 });
    }else{
        console.log('doin');
        $("#topbottom").velocity("fadeIn", { delay: 500, duration: 1500 });
    }
}

它在滚动时触发淡出，但不会触发淡入。当我回到滚动零时，它确实将 doin 写入控制台...

有点困惑。

谢谢

Answer 1

我认为您在滚动时正在执行您提供的代码。

要达到预期效果，您需要停止或完成以前的动画，并且只触发一次新动画，如果您不停止以前的动画，所有新动画都将排队。

您需要确定滚动位置何时从 0 变为任何其他位置以及从任何其他位置变为 0。

var isOnTop = true;

$(window).scroll(function(){
  var isCurrentOnTop = $(window).scrollTop()===0;

  if(isOnTop == isCurrentOnTop) //scroll has changed but we only care when has changed from or to 0
    return;

  isOnTop = isCurrentOnTop;

  var effect = isOnTop? "fadeIn": "fadeOut";


  $("#topbottom").velocity("finish").velocity(effect, { delay: 500, duration: 1500 });


});

请勾选this working fiddle

Velocity.js 触发 fadeOut 但不触发 fadeIn

Velocity.js fires off fadeOut but not fadeIn

javascript

velocity.js