使用嵌套函数和.load()函数创建动画循环

时间:2011-06-16 20:51:27

标签: jquery jquery-animate

我在这个实例中使用一个函数来循环动画,但它似乎没有触发任何东西,它只是在最后一帧停止并且什么都不做,你能告诉最好的行动方案来循环在代码下面?

    function doReplay(){
        $('body')
        .fadeTo(0,1,function(){
            $('#jqContent').load($welcome + ' #jqContent', function(){

                $('#telephoneNumber').load($welcome + ' #telephoneNumber');
                $('#minicomNumber').load($welcome + ' #minicomNumber');

                    Cufon.replace('.landing .nav, .quicklinks h3, .header .strap2, .header ul li a, .hero h2, legend, h1, .module h2, .module h3, blockquote p span, .tel strong', {hover: true});
                    //confiuration
                    $('#natWestJQ img').css({ "opacity" : 0, "display" : "block" });
                    $('.hero').css({ "position" : "relative" });
                    $('.hero h2').css({ "position" : "absolute", "z-index" : "9999", "width" : "400px"});
                    $('.hero p').css({ "position" : "absolute", "top" : "87px", "z-index" : "9999" });  

                    //welcome animation
                        //0s
                        $('#wcMale').css({
                            "bottom": "-30px",
                            "display": "block"
                        }).addClass('msieOn').animate({
                            "bottom": "0px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //0.25s
                        $('#wcMale2').css({
                            "bottom": "-30px",
                            "display": "block"
                        }).addClass('msieOn').delay(250).animate({
                            "bottom": "0px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });
                        $('#wcPhone').css({
                            "bottom": "-26px",
                            "display": "block"
                        }).addClass('msieOn').delay(250).animate({
                            "bottom": "16px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //0.5s
                        $('#wcBox').css({
                            "bottom": "-30px",
                            "display": "block"
                        }).addClass('msieOn').delay(500).animate({
                            "bottom": "0px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //0.75s
                        $('#wcChart').css({
                            "bottom": "9px",
                            "display": "block"
                        }).addClass('msieOn').delay(750).animate({
                            "bottom": "39px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //1s
                        $('#wcBelt').css({
                            "bottom": "50px",
                            "display": "block"
                        }).addClass('msieOn').delay(1000).animate({
                            "bottom": "80px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //1.25s
                        $('#wcBP').css({
                            "bottom": "-30px",
                            "display": "block"
                        }).addClass('msieOn').delay(1250).animate({
                            "bottom": "0px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });
                        $('#wcWH').css({
                            "bottom": "70px",
                            "display": "block"
                        }).addClass('msieOn').delay(1250).animate({
                            "bottom": "100px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //1.5s
                        $('#wcFactory').css({
                            "bottom": "99px",
                            "display": "block"
                        }).addClass('msieOn').delay(1500).animate({
                            "bottom": "119px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //1.75s
                        $('#wcLaptop').css({
                            "bottom": "96px",
                            "display": "block"
                        }).addClass('msieOn').delay(1750).animate({
                            "bottom": "126px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });

                        //2s
                        $('#wcOffice').css({
                            "bottom": "118px",
                            "display": "block"
                        }).addClass('msieOn').delay(2000).animate({
                            "bottom": "148px",
                            "opacity": 1
                        }, 250, function() {
                            $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                        });
            });
        })
        .delay(1000)
        .fadeTo(0,1,function(){
            $('#jqContent').load($startup + ' #jqContent', function(){

                $('#telephoneNumber').load($startup + ' #telephoneNumber');
                $('#minicomNumber').load($startup + ' #minicomNumber');
                Cufon.replace('.landing .nav, .quicklinks h3, .header .strap2, .header ul li a, .hero h2, legend, h1, .module h2, .module h3, blockquote p span, .tel strong', {hover: true});
                //confiuration
                $('#natWestJQ img').css({ "opacity" : 0, "display" : "block" });
                $('.hero').css({ "position" : "relative" });
                $('.hero h2').css({ "position" : "absolute", "z-index" : "9999"});
                $('.hero p').css({ "position" : "absolute", "top" : "87px", "z-index" : "9999" });

                //Startups Animation
                    //0s
                    $('#suMale').css({
                        "bottom": "-30px",
                        "display": "block"
                    }).addClass('msieOn').animate({
                        "bottom": "0px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //0.25s
                    $('#suClipBoard').css({
                        "bottom": "-17px",
                        "display": "block"
                    }).addClass('msieOn').delay(250).animate({
                        "bottom": "13px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });    

                    //0.5s
                    $('#suBPS').css({
                        "bottom": "77px",
                        "display": "block"
                    }).addClass('msieOn').delay(500).animate({
                        "bottom": "107px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });    

                    //0.75s
                    $('#suToolBox').css({
                        "bottom": "51px",
                        "display": "block"
                    }).addClass('msieOn').delay(750).animate({
                        "bottom": "81px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

                    //1s
                    $('#suBP').css({
                        "bottom": "133px",
                        "display": "block"
                    }).addClass('msieOn').delay(1000).animate({
                        "bottom": "163px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

            });
        })
        .delay(1000)
        .fadeTo(0,1,function(){
            $('#jqContent').load($to2m + ' #jqContent', function(){

                $('#telephoneNumber').load($to2m + ' #telephoneNumber');
                $('#minicomNumber').load($to2m + ' #minicomNumber');

                Cufon.replace('.landing .nav, .quicklinks h3, .header .strap2, .header ul li a, .hero h2, legend, h1, .module h2, .module h3, blockquote p span, .tel strong', {hover: true});
                $('#natWestJQ img').css({ "opacity" : 0, "display" : "block" });
                $('.hero').css({ "position" : "relative" });
                $('.hero h2').css({ "position" : "absolute", "z-index" : "9999"});
                $('.hero p').css({ "position" : "absolute", "top" : "87px", "z-index" : "9999" });  


                //upto 2million turnover animation
                    //0s
                    $('#to2mWoman').css({
                        "bottom": "-30px",
                        "display": "block"
                    }).addClass('msieOn').animate({
                        "bottom": "0px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

                    //0.25s
                    $('#to2mBag').css({
                        "bottom": "14px",
                        "display": "block"
                    }).addClass('msieOn').delay(250).animate({
                        "bottom": "44px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });    
                    $('#to2mTape').css({
                        "bottom": "28px",
                        "display": "block"
                    }).addClass('msieOn').delay(250).animate({
                        "bottom": "58px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });    

                    //0.5s
                    $('#to2mPeople').css({
                        "bottom": "13px",
                        "display": "block"
                    }).addClass('msieOn').delay(500).animate({
                        "bottom": "43px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });    

                    //0.75s
                    $('#to2mThread').css({
                        "bottom": "40px",
                        "display": "block"
                    }).addClass('msieOn').delay(750).animate({
                        "bottom": "70px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    $('#to2mTable').css({
                        "bottom": "80px",
                        "display": "block"
                    }).addClass('msieOn').delay(750).animate({
                        "bottom": "118px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1s
                    $('#to2mCloth').css({
                        "bottom": "37px",
                        "display": "block"
                    }).addClass('msieOn').delay(1000).animate({
                        "bottom": "67px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

                    //1.25s
                    $('#to2mClipboard').css({
                        "bottom": "84px",
                        "display": "block"
                    }).addClass('msieOn').delay(1250).animate({
                        "bottom": "114px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 
                    $('#to2mManequin').css({
                        "bottom": "135px",
                        "display": "block"
                    }).addClass('msieOn').delay(1250).animate({
                        "bottom": "165px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1.5s
                    $('#to2mBuilding').css({
                        "bottom": "26px",
                        "display": "block"
                    }).addClass('msieOn').delay(1500).animate({
                        "bottom": "60px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

                    //1.75s
                    $('#to2mBlueprint').css({
                        "bottom": "130px",
                        "display": "block"
                    }).addClass('msieOn').delay(1750).animate({
                        "bottom": "160px",
                        "opacity": 1
                    }, 500, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 
                    $('#to2mClothes').css({
                        "bottom": "43px",
                        "display": "block"
                    }).addClass('msieOn').delay(1750).animate({
                        "bottom": "73px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    }); 

                    //2s
                    $('#to2mStore').css({
                        "bottom": "141px",
                        "display": "block"
                    }).addClass('msieOn').delay(2000).animate({
                        "bottom": "171px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });  

            });
        })
        .delay(1000)
        .fadeTo(0,1, function(){
                $('#telephoneNumber').load($to25m + ' #telephoneNumber');
                $('#minicomNumber').load($to25m + ' #minicomNumber');

                $('#jqContent').load($to25m + ' #jqContent', function(){
                    //configuration
                    $('#natWestJQ img').css({ "opacity" : 0, "display" : "block" });
                    $('.hero').css({ "position" : "relative" });
                    $('.hero h2').css({ "position" : "absolute", "z-index" : "9999"});
                    $('.hero p').css({ "position" : "absolute", "top" : "87px", "z-index" : "9999" });  
                    Cufon.replace('.landing .nav, .quicklinks h3, .header .strap2, .header ul li a, .hero h2, legend, h1, .module h2, .module h3, blockquote p span, .tel strong', {hover: true});
                    //upto 25million turnover
                    //0s
                    $('#to25Male').css({
                        "bottom": "-30px",
                        "display": "block"
                    }).addClass('msieOn').animate({
                        "bottom": "0px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //0.25s
                    $('#to25Van').css({
                        "bottom": "-10px",
                        "display": "block"
                    }).addClass('msieOn').delay(250).animate({
                        "bottom": "20px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });
                    $('#to25Ppl').css({
                        "bottom": "67px",
                        "display": "block"
                    }).addClass('msieOn').delay(500).animate({
                        "bottom": "97px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //0.5s
                    $('#to25Phone').css({
                        "bottom": "34px",
                        "display": "block"
                    }).addClass('msieOn').delay(500).animate({
                        "bottom": "64px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //0.75s
                    $('#to25Lorry').css({
                        "bottom": "107px",
                        "display": "block"
                    }).addClass('msieOn').delay(750).animate({
                        "bottom": "137px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });
                    $('#to25Office').css({
                        "bottom": "50px",
                        "display": "block"
                    }).addClass('msieOn').delay(750).animate({
                        "bottom": "80px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1s
                    $('#to25Server').css({
                        "bottom": "58px",
                        "display": "block"
                    }).addClass('msieOn').delay(1000).animate({
                        "bottom": "88px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1.25s
                    $('#to25Crane').css({
                        "bottom": "125px",
                        "display": "block"
                    }).addClass('msieOn').delay(1250).animate({
                        "bottom": "155px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });
                    $('#to25WH').css({
                        "bottom": "79px",
                        "display": "block"
                    }).addClass('msieOn').delay(1250).animate({
                        "bottom": "109px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1.5s
                    $('#to25Work').css({
                        "bottom": "-30px",
                        "display": "block"
                    }).addClass('msieOn').delay(1500).animate({
                        "bottom": "0px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });

                    //1.75s
                    $('#to25Building').css({
                        "bottom": "138px",
                        "display": "block"
                    }).addClass('msieOn').delay(1500).animate({
                        "bottom": "168px",
                        "opacity": 1
                    }, 250, function() {
                        $(this).css("filter", "").removeClass('msieOn').addClass('msieOff')
                    });             
            }, doReplay);
        });
    }
    doReplay();

1 个答案:

答案 0 :(得分:2)

由于你多次调用load方法,我怀疑响应是否会基于服务器负载处于相同的顺序。

然而,为了解决你的问题,fadeTo只需要3个参数,你将doReplay作为第4个参数传递给最后一个fadeTo,它什么都不做。尝试在最后一个fadeTo回调或最后一个fadeTo调用的加载回调中调用doReplay。