How do I chain or queue custom functions using JQu

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 sequentially and not at the same time.

I am trying to automate multiple events in sequence to look like a user has been clicking on different buttons or links.

I could probably do this using callback functions but then I would have to pull all of the animations from the different functions and regroup in the right pattern.

Does the jquery "queue" help? I couldn't understand the documentation for the queue.

Example, 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>

Thanks.

EDIT: I tried it with timers but I thought there is a better way to do it.

EDIT #2:

Let me be more specific. I have multiple functions bound to click & hover events on different elements of the page. Normally these functions have nothing to do with each other ( they don't reference each other). I would like to simulate a user going through these events without changing the code of my existing functions.

标签： jquery animation queue chaining

15条回答

爱情/是我丢掉的垃圾

2楼-- · 2019-01-13 08:49

I'd create an array of functions and add every function you want to queue to it.

Then I'd append a function call which loops through the array and calls each function to the event through jQuery.

You could probably create a very simple plugin for jQuery that could handle this internally as well.

0人赞添加讨论(0) 举报

▲ chillily

3楼-- · 2019-01-13 08:49

I would run the second as a callback function:

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

which would run two() when first animation finishes, if you have more animations on timed queue for such cases i use jquery timer plugin instead setTimeout(), which comes very handy in some cases.

0人赞添加讨论(0) 举报

欢心

4楼-- · 2019-01-13 08:49

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) 举报

家丑人穷心不美

5楼-- · 2019-01-13 08:50

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) 举报

手持菜刀，她持情操

6楼-- · 2019-01-13 08:55

A safer and 100% working way is to use a variable and if-branches. In the example below we do 4 jobs which take 1 second, after the job we want the function f2 to run.

<html><body>
<div id="a" class="a" />
 <script type="text/javascript">
var jobs = 0;
function f1() {
job(); 
job();
job();
job();    
};

function f2() {
    if(jobs >3)
        l("f2");
};

<!------------------------- ->
function job() {
    setTimeout(function() {
        l("j");
        jobs+=1;
        f2();
    }, 1000);
}
function l(a) {
    document.getElementById('a').innerHTML+=a+"<br />";
};
f1();


</script></body></html>

0人赞添加讨论(0) 举报

\"骚年 ilove

7楼-- · 2019-01-13 08:57

While Yehuda Katz's answer is technically correct it will bloat very quickly with larger more complex animations.

I made a plugin for situations like yours that allows for queuing functions (with pause and resume if needed).

demo: https://jessengatai.github.io/okaynowthis.js/

The solution to your problem using okaynowthis.js would look like this:

$('window').load(function(){

    // keyframe 1
    $('body').okaynowthis('keyframe',0,function(){
        $('div#animateTest1').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    // keyframe 2 (with 2 seconds delay from keyframe 1)
    }).okaynowthis('keyframe',2000,function(){
        $('div#animateTest2').animate({ left: '+=200' }, 2000);
        // + anything else you want to do

    });

});

0人赞添加讨论(0) 举报

1 2 3 下一页

How do I chain or queue custom functions using JQu

采纳回答

编辑标签

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮

付费偷看金额在0.1-10元之间