微信公众号搜"智元新知"关注
微信扫一扫可直接关注哦!

jQuery链接动画没有插件

在使用jQuery之前,我可以做一个链接动画,延迟时间如下:
$("#element").delay(45).animate({ },45)
             .delay(45).animate({ },45);

现在,自从更新到v1.6.1而不是执行之前的操作之后,它现在跳到最后一个动画.忽略之前的陈述.我知道我可以为每个动画做一个不完整的回调,但这只是弄乱了:

$("#element").delay(45).animate({ },45,function(){
    $("#element").delay(45).animate({ },function(){
        $("#element").delay(45).animate({ },45);
    })
})

有谁知道如何以简单干净的方式实现这一目标?

解决方法

这是第二种方式.我把它贴在另一个答案中,因为它更复杂,也许不那么漂亮.要玩它,请参阅: http://jsfiddle.net/LMptt/1/

用法:使用带或的字符串来表示相对时间戳.该顺序对相对时间戳(相对于之前的操作)很重要.使用“0”或“-0”表示与前一个时间戳相同的时间戳.绝对时间戳(整数)可以放在列表中的任何位置.

$(document).ready(function ()
{
    queue([
        [2000,function () {  $('.two').slideUp(); }],['-1000',function () {  $('.one').slideUp(); }],[3000,function () {  $('.three').slideUp(); }],['+1000',function () {  $('.four').slideUp(); }]
    ]);

});

/**
 * Queue.js
 *
 * @author Arend van Waart
 *
 *  This will allow for events to be queued by (relative) timestamp
 */

 function queue (queue){
    var self = this;
    // queue
    this.queue = queue;
    // time passed is 0
    this.timePassed = 0;
    // time in ms to sleep between checks.
    this.sleep = 100;

    var time = new Date();
    this.lastTime = time.getTime();
    this.iterate = function(){
        var total = 0;
        var time = new Date();

        // how much time has passed since we slept?
        self.timePassed = self.timePassed + (time.getTime() - self.lastTime);
        self.lastTime = time.getTime();

        for (var i in self.queue) {
            if (self.queue[i][0] <= self.timePassed){
                self.queue[i][1]();
                self.queue.splice(i,1);
            } else {
                // added sorting Now,so we don't have to evaluate the rest.
                break;
            }
        }

        if (self.queue.length == 0){
            return;
        }else{
            setTimeout(self.iterate,self.sleep);
        }
    }


    this.parseRelative = function ()
    {
        var absoluteQueue = [];
        var lastAbsolute = 0;
        for (var i in queue)
        {
           var absolute;
           var firstChar = String(queue[i][0]).charat(0);
           if (firstChar == "+" ||  firstChar == "-")
           {
              absolute = lastAbsolute + parseInt(queue[i][0]);
           } else {
              absolute = parseInt(queue[i][0]);
           }
           lastAbsolute = absolute;
           absoluteQueue.push([absolute,queue[i][1]]);
        }
        this.queue = absoluteQueue;
    }
    this.sort = function (a,b)
    {
        return a[0] - b[0];
    }

    this.parseRelative();
    this.queue.sort(this.sort);
    this.iterate();
}

原文地址:https://www.jb51.cc/jquery/241449.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐