jQuery動畫級聯

您好我有一個網站，其中包含三個或更多div的div。我的div id（id =「linguetta_next」）是動態的：我在裏面動態添加多於一個div。我想讓div進入主div（linguetta_next）級聯：第一次出現，最後第二次出現，最後第三次出現。jQuery動畫級聯

這是我的html：

<div id="linguetta_next"> 
       <div class="linguetta" id="linguetta_next1" style="margin-left:1%;"> 
        <p class="tit_linguetta">azienda</p> 
       </div> 
       <div class="linguetta_small" id="linguetta_next2" style="margin-left:10%; margin-top:10px;"> 
        <p class="tit_linguetta_small">staff</p> 
       </div> 
       <div class="linguetta_small" id="linguetta_next3" style="margin-left:10%; margin-top:10px;"> 
        <p class="tit_linguetta_small">risorse umane</p> 
       </div> 
      </div>

我已經在這個模式，但在該模式下試圖出現在同一時間，我怎樣才能使一個連帶效應？

function moveDiv(){ 
var menu2=$(".colCenter").find('#linguetta_next'); 
menu2.css('right',-300).css('position','absolute').css('z-index',1000); 
menu2.animate({left:0}, 1000); 
}

來源

2012-09-06 Alessandro Minoccheri

這裏有一個選項：

$("#linguetta_next div").each(function(i) { 
    var el = $(this); 
    setTimeout(function() { 
     el.animate({ 
      left: 0 
     }, 1000); 
    }, i * 2000); 
});

DEMO：http://jsfiddle.net/5Pbwf/

來源

2012-09-06 08:37:21 VisioN

完美這是我想要的效果！ –

@AlessandroMinoccheri不錯，不客氣！ – VisioN

使用jQuery的.animate()使用動畫效果，你需要一個回調來創建級聯效應，回調會被調用後，才初步動畫是動畫（可選）的時間一起完成;像：

$('#linguetta_next1').animate(function() { 
    // do animation stuff 
} , 1000, function() { 
    // callback - effect to do after first is complete 
});

來源

2012-09-06 08:31:32 Vishal

我不能直接使用div的id，因爲它是動態的或者我有太多的div來設置動畫。我想要一個功能，主div內的每個div都有相同的動畫。 –

您可以使用class屬性來達到該目的;除了你需要在堆棧中的那個元素的位置，所以可以使用像'.first（）'或'.next（）' – Vishal

這樣的方法嗎？ –

如果可能的話，使用jQuery的週期插件：http://jquery.malsup.com/cycle/

這很容易成立並使用。你的情況的一個例子可以在初學者演示中看到：

$('#linguetta_next').cycle({ 
    fx: 'scrollLeft' 
});

來源

2012-09-06 08:40:56 Jozzeh

jQuery動畫級聯

回答

相關問題