3

您好我有一个 div 包含三个或更多 div 的网站。我的 div id (id="linguetta_next") 是动态的：我动态添加的不仅仅是其中的 div。我希望进入主 div（linguetta_next）的 div 以级联形式出现：第一个出现，最后第二个出现，最后第三个出现。

这是我的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 );
}
4

3 回答 3

7

这是一种选择：

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

演示：http: //jsfiddle.net/5Pbwf/

于 2012-09-06T08:37:21.943 回答
2

使用 jQuery 的动画效果.animate()，因为您需要一个回调来创建级联效果，只有在初始动画完成以及动画时间后才会调用回调（可选）；像：

$('#linguetta_next1').animate(function() {
    // do animation stuff
} , 1000, function() {
    // callback - effect to do after first is complete
});
于 2012-09-06T08:31:32.460 回答
0

如果可能，请使用 jquery 循环插件：http: //jquery.malsup.com/cycle/

它非常易于设置和使用。您可以在初学者演示中看到一个示例：

$('#linguetta_next').cycle({ 
    fx: 'scrollLeft' 
});
于 2012-09-06T08:40:56.063 回答