如何使用JQuery链接或排队自定义函数？

Question

我有多个函数,对HTML的不同部分做不同的动画.我想链接或排队这些函数,以便它们按顺序而不是同时运行动画.

我试图按顺序自动化多个事件,看起来像用户点击了不同的按钮或链接.

我可以使用回调函数来做这件事但是我必须从不同的函数中拉出所有动画并以正确的模式重新组合.

jquery"队列"有帮助吗？我无法理解队列的文档.

例子,JQuery:

 function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
    }
    function Two() {
        $('div#animateTest2').animate({ width: '+=200' }, 2000);
    }

// Call these functions sequentially so that the animations
// in One() run b/f the animations in Two()
    One();
    Two();

HTML:

    <div id="animatetest" style="width:50px;height:50px;background-color:Aqua;position:absolute;"></div>
    <div id="animatetest2" style="width:50px;height:50px;background-color:red;position:absolute;top:100px;"></div>

谢谢.

编辑:我尝试了计时器,但我认为有更好的方法来做到这一点.

编辑#2:

让我更具体一点.我有多个函数绑定在页面的不同元素上单击和悬停事件.通常这些功能彼此无关(它们不相互引用).我想模拟用户在不更改现有函数代码的情况下完成这些事件.

Answer 1

jQuery Queue代码没有尽可能详细记录,但基本思路是这样的:

$("#some_element").queue("namedQueue", function() {
  console.log("First");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Second");
  var self = this;
  setTimeout(function() {
    $(self).dequeue("namedQueue");
  }, 1000);
});

$("#some_element").queue("namedQueue", function() {
  console.log("Third");
});

$("#some_element").dequeue("namedQueue");

如果运行此代码,您将在控制台中看到"First",暂停1秒,在控制台中看到"Second",另一个暂停1秒,最后在控制台中看到"Third".

基本思想是您可以将任意数量的命名队列绑定到元素.您可以通过调用从队列中删除元素dequeue.您可以根据需要自己手动执行此操作,但如果您希望队列自动运行,则只需dequeue在排队功能内部调用即可.

jQuery中的动画都在一个名为的队列中运行fx.为元素设置动画时,它会自动在队列中添加新动画,如果当前没有动画,则调用出列.fx如果您愿意,可以将自己的回调插入到队列中; 你只需要dequeue在最后手动调用(与任何其他队列一样).