jquery通過圖片動畫

我正在學習jquery來製作一些很酷的動畫。現在我已經對圖片進行了分配，這些圖片擴大了，合同和不透明度的變化，最後它隱藏了。jquery通過圖片動畫

這裏是我的代碼：

function play_pic1() 
{ 
    var div = $("#img"); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
} 

$(document).ready(function(){ 
     play_pic1(); 
     play_pic1();  
});

問題是，它僅適用於一個圖像，當我嘗試插入第二圖像的第二圖像變成靜止。

我用循環和函數，但沒有任何幫助。請幫助我解決這個問題。

來源

2013-01-08 Wajahat Kareem

@ Mistu4u請不要使用功課標籤。正如標籤描述清楚指出的那樣，它已經過時了。 –

@ J.Steen，謝謝你的澄清。 – Mistu4u

您可以將要設置動畫的元素作爲函數的參數傳遞，例如

function play_pic1(element) 
{ 
    var div = $(element); 
    div.animate({width:0},2000) 
     .animate({width:1100,opacity:0},4000) 
     .animate({opacity:1},4000) 
     .hide(4000); 
} 

$(document).ready(function(){ 
     play_pic1("#img1"); 
     play_pic1("#img2");  
});

OP澄清後：如果您需要有在不同的元素順序動畫，你可以使用Deferred objects像這樣

例JSBin：http://jsbin.com/ilisug/1/edit

function animate(el) 
{ 
    var div = $(el); 
    return div.animate({width:0},2000) 
     .animate({width:300,opacity:0},2000) 
     .animate({opacity:1},2000) 
     .hide(2000); 
} 

$(document).ready(function(){ 

    var dfd = $.Deferred(), 
     chain = dfd; 

    var slide = ['#el1', '#el2', '#el3']; 

    $.map(slide, function(el) { 
     chain = chain.pipe(function() { 
      return animate(el).promise(); 
     }); 
    }); 

    chain.done(function() { 
     alert('done') 
    }); 

    return dfd.resolve(); 
});

來源

2013-01-08 08:55:05 fcalderan

感謝您的幫助，這篇文章幫助我掌握了鏈接方法和功能。但仍然兩張照片都在一起動畫，我想做一個時間表示。像滑塊計時器基座一樣。 –

@WajahatKareem看到我的更新 – fcalderan

我沒有你的幫助文字....感謝一堆。 –

那是因爲你無法通過一個ID檢索所有div：在HTML中只有一個id可能發生文件。

您應該使用一個類（<div class=img></div>），並與

var div = $(".img");

來源

2013-01-08 08:56:04

var div = $("#img");

上述聲明說，只有#img會被引用取代

var div = $("#img");

。當你動態添加圖片時，你將不得不修改你的代碼。嘗試傳遞一個ID給這個函數，並在其上應用動畫。像

function play_pic1(id) 
{ 
    var div = $(id); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
}

來源

2013-01-08 08:56:15 Rahul

的#img將適用於只有第一形象，你必須選擇作爲參數傳遞給play_pic1()

function play_pic1(elem) 
{ 
    var div = $(elem); 
    //your code here 
} 

$(document).ready(function(){ 
     play_pic1("#img"); //pass the img selector to play_pic1 
     play_pic1("#img2");  
});

來源

2013-01-08 08:57:26

我覺得你的問題是，使用sameID多元素#img只會影響第一個元素。

，而不是這個，你可以使用.img類和驗證碼：

function play_pic1(){ 
$(".img").each(function(){ 
    var div = $(this); 
    div.animate({width:0},2000); 
    div.animate({width:1100,opacity:0},4000); 
    div.animate({opacity:1},4000); 
    div.hide(4000); 
}); 
} 

$(document).ready(function(){ 
    play_pic1();  
});

嘗試使用類$(".img")

來源

2013-01-08 09:03:29 Jai

是的，我得到了點，仍然兩個圖像是同心動畫，我想要一個接一個來。 –

jquery通過圖片動畫

回答

相關問題