我怎样才能动画多种元素按顺序使用jQuery？(How can I animate multiple

2019-06-17 22:21发布

站内文章 / 后端开发

12 0

女 | 书童

私信

我认为这将是简单的，但我仍然无法得到它的工作。通过点击一个按钮，我想几个动画发生- 一前一后 -但现在所有的动画都发生一次。这里是我的代码 - 有人可以告诉我，我要去哪里错了？：

$(".button").click(function(){
  $("#header").animate({top: "-50"}, "slow")
  $("#something").animate({height: "hide"}, "slow")
  $("ul#menu").animate({top: "20", left: "0"}, "slow")
  $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
});

Answer 1:

你可以做一大堆的回调。

$(".button").click(function(){
    $("#header").animate({top: "-50"}, "slow", function() {
        $("#something").animate({height: "hide"}, "slow", function() {
            $("ul#menu").animate({top: "20", left: "0"}, "slow", function() {
                $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");        
            });
        });
    });
});

Answer 2:

队列只有当你的动画相同的元素的作品。上帝知道为什么上面得到了投票了，但它不会工作。

您将需要使用动画回调。你可以通过一个函数作为最后一个参数去的动画功能和动画完成后就会被调用。但是如果你有回调多个嵌套的动画脚本就会变得相当不可读。

我建议以下插件，它重新写入本地jQuery的动画功能，并允许您指定队列名称。您使用相同的队列名称添加所有的动画将依次为展示运行在这里。

示例脚本

  $("#1").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
  $("#2").animate({marginTop: "100px"}, {duration: 100, queue: "global"});
  $("#3").animate({marginTop: "100px"}, {duration: 100, queue: "global"});

Answer 3:

我知道这是一个老问题，但它应该与新的jQuery版本（1.5及以上）的答案被更新：

使用$.when功能，你可以这样写帮手：

function queue(start) {
    var rest = [].splice.call(arguments, 1),
        promise = $.Deferred();

    if (start) {
        $.when(start()).then(function () {
            queue.apply(window, rest);
        });
    } else {
        promise.resolve();
    }
    return promise;
}

然后，你可以这样调用：

queue(function () {
    return $("#header").animate({top: "-50"}, "slow");
}, function () {
    return $("#something").animate({height: "hide"}, "slow");
}, function () {
    return $("ul#menu").animate({top: "20", left: "0"}, "slow");
}, function () {
    return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");        
});

Answer 4:

对@ schmunk的回答略有改善是使用普通的对象jQuery对象的队列，以避免与其他不相关的动画相冲突：

$({})
    .queue(function (next) {
        elm1.fadeOut('fast', next);
    })
    .queue(function (next) {
        elm2.fadeIn('fast', next);
    })
    // ...

有一点要记住的是，虽然我从来没有遇到这样的问题，根据该文档使用一个普通的对象包装队列方法不正式支持。

正与平原对象
目前，支撑在包裹在jQuery的是普通的JavaScript对象的唯一的操作：。数据（）,.丙（）,.绑定（），.unbind（），.trigger（）和.triggerHandler（）。

Answer 5:

在jammus的回答延伸，这也许是动画长序列位更实用。发送列表，每个动画反过来，递归调用以降低列表中再次动画。执行的回调时，所有完成。

在此列表中选择元素，但它可能是每持有不同的动画动画参数更复杂的对象的列表。

这里是一个小提琴

$(document).ready(function () {
    animate([$('#one'), $('#two'), $('#three')], finished);
});

function finished() {
    console.log('Finished');
}

function animate(list, callback) {
    if (list.length === 0) {
        callback();
        return;
    }
    $el = list.shift();
    $el.animate({left: '+=200'}, 1000, function () {
        animate(list, callback);
    });
}

Answer 6:

动画多个标签依序

您可以利用jQuery的内置的动画排队，如果你只选择一个标签般的身体做全球排队：

// Convenience object to ease global animation queueing
$.globalQueue = {
    queue: function(anim) {
        $('body')
        .queue(function(dequeue) {
            anim()
            .queue(function(innerDequeue) {
                dequeue();
                innerDequeue();
            });
        });

        return this;
    }
};

// Animation that coordinates multiple tags
$(".button").click(function() {
    $.globalQueue
    .queue(function() {
        return $("#header").animate({top: "-50"}, "slow");
    }).queue(function() {
      return $("#something").animate({height: "hide"}, "slow");
    }).queue(function() {
        return $("ul#menu").animate({top: "20", left: "0"}, "slow");
    }).queue(function() {
        return $(".trigger").animate({height: "show", top: "110", left: "0"}, "slow");
    });
});

http://jsfiddle.net/b9chris/wjpL31o0/

所以，在这里就是为什么这个工程，以及它在做什么：

要调用$.globalQueue.queue()仅仅是排队到代码中的动画调用，但它会将它的身体标记。
当jQuery的打在身上队列你的标签动画，你的标签的动画开始，在队列为你的标签 - 但这样的jQuery的动画框架的工作，任何自定义动画的回调会导致标签的动画队列（人体在这种情况下）暂停，直到自定义动画调用传入的dequeue()函数。所以，即使你的动画标记和身体的队列是分开的，身体标记的队列，现在正等待其dequeue()被调用。 http://api.jquery.com/queue/#queue-queueName-callback
我们只是做该标签的队列中的最后一个排队的项目在调用调用其继续全局队列dequeue()函数-这是队列什么联系在一起。
为方便起见， globalQueue.queue方法返回this便于链接参考。

的setInterval

为了完整起见，它很容易在这里的土地只是寻求一种替代setInterval -那就是你没有那么多期待作出独立的动画坐标，刚刚在你的动画造成解雇他们随着时间的推移，而不怪潮提前这样新的浏览器将推迟动画队列和定时器，以节省CPU。

您可以替换调用setInterval像这样：

setInterval(doAthing, 8000);

有了这个：

/**
 * Alternative to window.setInterval(), that plays nicely with modern animation and CPU suspends
 */
$.setInterval = function (fn, interval) {
    var body = $('body');
    var queueInterval = function () {
        body
        .delay(interval)
        .queue(function(dequeue) {
            fn();
            queueInterval();
            dequeue();  // Required for the jQuery animation queue to work (tells it to continue animating)
        });
    };
    queueInterval();
};

$.setInterval(doAthing, 8000);

http://jsfiddle.net/b9chris/h156wgg6/

并避免动画的那些尴尬爆炸时，后台标签页有其动画浏览器重新启用。

Answer 7:

你也可以把你的效果到同一个队列，即BODY元素的队列。

$('.images IMG').ready(
   function(){
        $('BODY').queue(
            function(){
                $('.images').fadeTo('normal',1,function(){$('BODY').dequeue()});
            }
        );
    }
);

请务必与出队（）最后的效果回调中。

Answer 8:

This has already been answered well (I think jammus's answer is the best) but I thought I'd provide another option based on how I do this on my website, using the delay() function...

  $(".button").click(function(){
     $("#header").animate({top: "-50"}, 1000)
     $("#something").delay(1000).animate({height: "hide"}, 1000)
     $("ul#menu").delay(2000).animate({top: "20", left: "0"}, 1000)
     $(".trigger").delay(3000).animate({height: "show", top: "110", left: "0"}, "slow");
});

(replace 1000 with your desired animation speed. the idea is your delay function delays by that amount and accumulates the delay in each element's animation, so if your animations were each 500 miliseconds your delay values would be 500, 1000, 1500)

edit: FYI jquery's 'slow' speed is also 600miliseconds. so if you wanted to use 'slow' still in your animations just use these values in each subsequent call to the delay function - 600, 1200, 1800

Answer 9:

使用queue选项：

$(".button").click(function(){
  $("#header").animate({top: "-50"}, { queue: true, duration: "slow" })
  $("#something").animate({height: "hide"}, { queue: true, duration: "slow" })
  $("ul#menu").animate({top: "20", left: "0"}, { queue: true, duration: "slow" })
  $(".trigger").animate({height: "show", top: "110", left: "0"}, { queue: true, duration: "slow" });
});

文章来源: How can I animate multiple elements sequentially using jQuery?