Question

在使用Rails 4构建的my website上，我使用jQuery的animate函数。但是，它似乎运行得不是很顺利。在我的application.js中，我的代码位于$(window).load：

下

以下是动画块的示例：

$('.background').animate({right: '-2000px'}, 1000, function(){
        $($('nav a.active').attr('href')).css("display","none");
        $('nav a.active').removeClass('active');
        $('.photos').css("display","none");
        $(e.currentTarget).addClass('active');
        hash = $('nav a.active').prop("hash");
        target = document.getElementById(hash.slice(1));
        $('.background').animate({right: '0px'}, 1000, function(){
            $(target).fadeIn(300);
            navFix();
        });
});

我该怎么做才能让这更顺畅？您可以点击左侧的导航链接，实时查看问题here。

Answer 1

问题是你的CSS正在与你的JS（使用jQuery）作斗争。特别是你的过渡与你的动画作斗争。

在CSS中，您已向transition课程添加了CSS3 .background：

-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

因此，每当您更改任何可以转换的.background CSS属性时，都会尝试使用该转换速度。不幸的是，CSS属性right是一个可以转换的属性。因此，当您为背景设置动画时，持续时间为1000毫秒时，它正在与想要以300毫秒的持续时间进行操作的CSS进行对抗。

因此要么使用转换，要么使用jQuery动画，但不能同时使用。

修复1。应该解决您的问题并为您提供300毫秒的持续时间：

$('.background').css({right: '-2000px'}, function(){
        $($('nav a.active').attr('href')).css("display","none");
        $('nav a.active').removeClass('active');
        $('.photos').css("display","none");
        $(e.currentTarget).addClass('active');
        hash = $('nav a.active').prop("hash");
        target = document.getElementById(hash.slice(1));
        $('.background').animate({right: '0px'}, 1000, function(){
            $(target).fadeIn(300);
            navFix();
        });
});

修复2。应该解决您的问题，并为您提供1000毫秒的持续时间：

/* in your CSS */
.background {
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  -o-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease;
  /* overriding the transition property that was applied to all*/
  -webkit-transition: right 1s ease; 
  -moz-transition: right 1s ease;
  -o-transition: right 1s ease;
  -ms-transition: right 1s ease;
  transition: right 1s ease;

}

// in your JS
$('.background').css({right: '-2000px'}, function(){
        $($('nav a.active').attr('href')).css("display","none");
        $('nav a.active').removeClass('active');
        $('.photos').css("display","none");
        $(e.currentTarget).addClass('active');
        hash = $('nav a.active').prop("hash");
        target = document.getElementById(hash.slice(1));
        $('.background').animate({right: '0px'}, 1000, function(){
            $(target).fadeIn(300);
            navFix();
        });
});

平滑jQuery动画

1 个答案: