JQuery 动画运行步

Question

我想运行一个动画在另一个动画的步骤中。不知何故，第二个动画的行为就像排队一样。

var checkTop = function(){
if( $(window).scrollTop() > 0 && $("#navigation").not(":animated") ){
    $("#navigation").animate({backgroundColor: "rgb(20,20,20,0.95)"}, {duration: 300, queue: false})
}
else{
    $("#navigation").animate({backgroundColor: "transparent"}, {duration: 300, queue: false})
    }
}

$(document).ready(function(){

var $window = $(window);    
$(".btn").click(function(){
    var btnname = $(this).attr('id');
    var section = btnname.replace('btn-','');

    $('html, body').stop().animate(
    { scrollTop: $('#' + section).offset().top - 30}, 
        {
            duration: 700, 
            queue: false, 
            step:function(now, fx){
                checkTop();
            }
        }
    );
    });     
});

任何帮助将不胜感激。

Answer 1

事实证明，在检查导航栏是否已设置动画时，if 语句存在问题（显示为始终未设置动画）。同样有趣的是，当我用 || 替换 && 时，向下滚动动画效果很好。为了解决检查问题，我添加了一个变量，如果导航栏未动画显示则设置为 0，如果可见则设置为 1。

var trigger = 0;

var checkTop = function(){
if( $(window).scrollTop() > 0 ){
    if(trigger == 0){
        $("#navigation").animate({backgroundColor: "rgb(20,20,20,0.95)"}, {duration: 700, queue: false})
        trigger = 1;
    }
}
else{
    $("#navigation").animate({backgroundColor: "transparent"}, {duration: 700, queue: false})
    trigger = 0;
}
}

JQuery 动画运行步

JQuery animation running in step

jquery

animation

JQuery 动画 运行 步

JQuery animation running in step

jquery

animation

JQuery 动画运行步