Question

单击我将一个元素移到浏览器窗口之外。在这个动画之后，我想为这个元素添加一个类，但遗憾的是，当我点击移动图标时，新类已经添加了。

我的代码：

$('#nav').click(function() {
$( "#wrapper" ).animate({ marginLeft: "-80%" }, "slow" );
$( "#nav_mob" ).show();
$( "#nav_mob" ).animate({ right: "-20%" }, "slow" );
$('.content').delay(2000).addClass("fixed");            
})

任何人都可以帮助我吗？

Answer 1

而不是：

$( "#nav_mob" ).animate({ right: "-20%" }, "slow" );
$('.content').delay(2000).addClass("fixed");

做的：

$( "#nav_mob" ).animate({ right: "-20%" }, "slow", function(){
    $('.content').delay(2000).addClass("fixed");
});

这利用了.animate()内置的回调，其中参数为：

包含要更改的属性的对象
动画的速度
动画完成后调用的函数

Answer 2

.delay()不能与.addClass()一起使用（它只适用于效果队列或自定义队列），但您可以改为使用setTimeout()函数：

$('#nav').click(function () {
    $("#wrapper").animate({
        marginLeft: "-80%"
    }, "slow");
    $("#nav_mob").show();
    $("#nav_mob").animate({
        right: "-20%"
    }, "slow");
    setTimeout(function () {
        $('.content').addClass("fixed");
    }, 2000);
})

Answer 3

你可以在动画完整函数中编写addClass代码

  $( "#nav_mob" ).animate({ right: "-20%" }, "slow",function(){
    $('.content').addClass("fixed");            
  });

添加addClass的延迟

3 个答案: