Question

我目前正在构建一个jquery滑块。我怎样才能继续循环运行？我跟着this post，似乎也没有用。有人能指出我正确的方向吗？

这是我的代码和JSFiddle：

<style>
img {
    position:absolute;
    top:0px;
    left:0px;
}
#img {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999999;
}
#img1 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:999;
}
#img2 {
    width:652px;
    height:314px;
    position:absolute;
    top:0px;
    right:0px;
    z-index:99;
}
#content {
    height:350px;
    width:652px;
    position: relative
}
</style>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>

<div id="content">
  <div id="img1" style="background:url(scarf01.jpg);"></div>
  <div id="img2" style="background:url(scarf02.jpg);"></div>
</div>
<script>
$(document).ready(function () {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {


  });


});
</script>

Answer 1

这将保持连续性：

function animateThis() {
  $('#img1').delay(2000).animate(
     {"width": "0px"},
    1000, function() {
        $('#img2').css('z-index', '100');
        $('#img1').width(652).css('z-index', '99')
    });

$('#img2').delay(4000).animate(
    {"width": "0px"},
    1000, function() {  
        $('#img1').css('z-index', '100');
        $('#img2').width(652).css('z-index', '99'); 
        animateThis();
    });
}
$(document).ready(function () {
   animateThis();
});

Answer 2

在上一个动画完成后必须调用的函数中添加动画。

<script>
    $(document).ready(function () {
        runIt();
    });

    function runIt(){
        $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000);

        $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, runIt);
    }
</script>

Answer 3

http://jsfiddle.net/48yWZ/

尝试这样的事情吗？

loopz(); //on load 

function loopz() {

    $('#img1').delay(2000).animate(
            {"width": "0px"},
            1000, function() {  
  });   

    $('#img2').delay(4000).animate(
            {"width": "0px"},
            1000, function() {
    $('#img1').css("width", "652px");
   $('#img2').css("width", "652px");
loopz();

  });

}

Answer 4

你可以做到

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var fi=$('.im:first').css("z-index");
        var li=$('.im:last').css("z-index");
        var ne=$(this).next(".im");
        ne.css({"z-index":fi});
        $("#content").append(this);
        $(this).css({"width":"652px","z-index":li});
        play(ne);
   });
}

http://jsfiddle.net/zHxcw/16/为要动画的所有元素添加一个类更新

play($('.im:first'));
function play(ele){
ele.delay(2000).animate(
        {"width": "0px"},
    1000,function(){
        var ne=$(this).next(".im");
        $("#content").append(this);
        pos();
        $(this).css({"width":"652px"});         
        play(ne);
 });
}
function pos(){
    var maxz=999;
    $(".im").each(function(){
        $(this).css({"z-index":maxz});
        maxz--;
    });
}

http://jsfiddle.net/zHxcw/25/更多图片

jquery animate，在最后一个动作后重启（循环动画）

4 个答案: