Question

如果有人可以帮助我使用jquery逐个创建div从下到上滑动，我将感激不尽。第一个div应该有效一段时间并慢慢向上移动，第二个div应该开始上升并保持一段时间，这应该继续所有的div。

#carousel {
height:300px;
overflow:hidden;
}

#carousel div {
width:500px;
border:1px solid #ccc;
height:300px;
position:relative;
}

#carousel div:first-child {
background-color:#e01783;
}

#carousel div:nth-child(2) {
background-color:#ff4e00;
}

#carousel div:nth-child(3) {
background-color:#ffd141;
}

#carousel div:nth-child(4) {
background-color:#6dcb99;
}

#carousel div:last-child {
background-color:#e2b87f;
}


<section id="carousel">
                               <div></div>
                               <div></div>
                               <div></div>
                               <div></div>
                               <div></div>
               </section>




 var t = setInterval(function(){

        $("#carousel div").animate({marginTop:300},5000,function(){

            $(this).find("div:last").after($(this).find("div:first"));
            $(this).css({marginTop:0});

              });
    },5000);

Answer 1

您可以尝试以下（我使用jquery 1.8.3）

$('#carousel div:first-child').delay( 800 ).slideUp( 300 );
$('#carousel div:nth-child(2)').delay( 1600 ).slideUp( 300 );
$('#carousel div:nth-child(3)').delay( 2400 ).slideUp( 300 );
$('#carousel div:nth-child(4)').delay( 3200 ).slideUp( 300 );
$('#carousel div:last-child').delay( 4000 ).slideUp( 300 );

<强> DEMO HERE

甚至更好......

var delayMe = 0;
$('#carousel div').siblings().each( function() {
    delayMe += 800;
    $(this).delay(delayMe).slideUp(300);
});

<强> UPDATED DEMO

如何从底部到顶部滑动div

1 个答案: