0
我在這個實例中使用了一個函數來循環動畫，但它似乎沒有觸發任何東西，它只停留在最後一幀而什麼也不做，可以你建議循環下面的代碼的最佳做法？使用嵌套函數和.load（）函數創建動畫循環
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();
你好@SHankarSangoli，謝謝你的迴應，做完doReplay（）之後; FadeTo內部似乎工作，但它忽略了第三張幻燈片，這可能需要一個setTimeout函數？ – Xavier 2011-06-16 21:12:12
添加settimeout函數後，非常感謝！ – Xavier 2011-06-16 21:16:36
我很高興它有助於解決您的問題，謝謝。 – ShankarSangoli 2011-06-17 03:28:05