How do I chain or queue custom functions using JQuery?

前端未结

关注

 15  1383

I have multiple functions the do different animations to different parts of the HTML. I would like to chain or queue these functions so they will run the animations sequenti

相关标签:

15条回答

挽巷

2020-12-04 20:22

On one of my web projects, I had to perform various sequences of actions depending on what event fired. I did this using callbacks (something like the Visitor pattern). I created an object to wrap any function, or group of actions. Then I would queue those wrappers; an array works fine. When the event fired, I would iterate over the array, calling my object's specialized method that took a callback. That callback triggered my iteration to continue.

To wrap a function, you need knowledge of the apply function. The apply function takes an object for scope and an array of arguments. That way you don't need to know anything about the functions you are wrapping.

0 讨论(0)
发布评论:

提交评论
- 加载中...
暗喜

2020-12-04 20:22
As far as animation interval already defined in 2000 ms, you can do second call with delay in 2000 ms:
```
One();
SetTimeout(function(){
  Two();
}, 2000);
```
0 讨论(0)
发布评论:

提交评论
- 加载中...

逝去的感伤

2020-12-04 20:23

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

0 讨论(0)

没有蜡笔的小新

2020-12-04 20:25

Instead of creating a function simple way is here:

$('#main').animate({ "top": "0px"}, 3000, function()
   {    $('#navigation').animate({ "left": "100px"},  3000, function() 
        {
            alert("Call after first and second animation is completed.");
        })
    }
);

So, Jquery by default provide queue that execute function one by one.

0 讨论(0)

攒了一身酷

2020-12-04 20:26

Really Simple Fix.

function One() {
        $('div#animateTest1').animate({ left: '+=200' }, 2000, Two);
    }
    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();
//We no longer need to call Two, as it will be called when 1 is completed.
    //Two();

0 讨论(0)

天命终不由人

2020-12-04 20:29

Copy and pasting............7/9/2013

<!doctype html>
<html lang="en">
    enter code here<head>
  <meta charset="utf-8">
  <title>jQuery.queue demo</title>
  <style>
  div { margin:3px; width:40px; height:40px;
        position:absolute; left:0px; top:30px;
        background:green; display:none; }
  div.newcolor { background:blue; }
    </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
</head>
<body>

  <button id="start">Start</button>
  <button id="stop">Stop</button>
  <div></div>
<script>
   $("#start").click(function () {
      $("div").show("slow");
      $("div").animate({left:'+=200'},5000);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).addClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").animate({left:'-=200'},1500);
      jQuery.queue( $("div")[0], "fx", function () {
        $(this).removeClass("newcolor");
        jQuery.dequeue( this );
      });
      $("div").slideUp();
    });
    $("#stop").click(function () {
      jQuery.queue( $("div")[0], "fx", [] );
      $("div").stop();
    });
</script>

</body>
</html>

0 讨论(0)

1 2 3 下一页