Question

我试图一个接一个地显示3个div。我希望它们以1,2,3,1,2,3，......等序列显示。

这是我正在使用的代码

//Initially setting the divs to be hidden
$(document).ready(function(e) {
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    myFun();
});

var x=1;


function myFun(){
switch(x)
{       
case 1:
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".1").css("visibility","visible");
    x++;
    break;

case 2:
    $(".1").css("visibility","hidden");
    $(".3").css("visibility","hidden");
    $(".2").css("visibility","visible");
    x++;
break;

case 3:
    $(".1").css("visibility","hidden");
    $(".2").css("visibility","hidden");
    $(".3").css("visibility","visible");
    x=1;

break;

}
//this might be wrong
$(this).delay(1000,myFun());
}

这会显示三个div但没有延迟。我如何进行延迟并再次调用相同的功能。有没有更好的方法来做到这一点。

Answer 1

另一种方法

<div class="d d1">Div1</div>
<div class="d d2">Div2</div>
<div class="d d3">Div3</div>

JS

 cycle(1);

function cycle(seqIndex) {    
  $('.d' + seqIndex).fadeIn(500, function() {
        $('.d' + seqIndex).hide();
        seqIndex = (seqIndex == $('.d').length) ? 1 : seqIndex+1
        cycle(seqIndex);            
    });
}

小提琴：http://jsfiddle.net/XUFqu/

Answer 2

您正在x中将变量1设置为case 3，因此我假设您想要旋转。因此setInterval可能是正确的选择。

只需在函数window.setInterval(myFun, 1000);之外调用myFun，一切正常。

这是一个小提琴：http://jsfiddle.net/KHVvf/

此外，类名不应以数字开头。

Answer 3

您可以使用setTimeout：

window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);

Answer 4

这可以帮到你：

var $divs = $('div');
function foo(){
    $divs.each(function(i){
        $(this).delay(i * 500).toggle(0);
    });
    foo();
}

foo();

但这取决于隐藏的真实原因。

Answer 5

为什么不使用display：none代替可见性？

你可以试试这个，不是优雅而只是为了解释可见性继承的元素：

使用show（）函数可以设置持续时间和动画结束后要执行的回调，

给你的div一个共同的类，所以你可以一起引用myclass，例如：

<div class="myclass 1" >1</div>
<div class="myclass 2" >2</div>
<div class="myclass 3" >3</div>

$(document).ready(function(e) {
    $(".myclass").hide(); //maybe is better to hide them by Css
    fadeInAll()
});

 var delay = 500;



   //Show each div in sequence
    function fadeInAll(){
        $(".1").show(delay,function(){
               $(".2").show(delay,function(){
                     $(".3").show(delay,function(){
                         fadeOutAll()
                    })
               })
        })
    }

   //Hide each div in sequence 
    function fadeOutAll(){
        $(".1").hide(delay,function(){
               $(".2").hide(delay,function(){
                     $(".3").hide(delay,function(){
                         //Loop again
                         fadeInAll()
                    })
               })
        })
    }

here这个工作示例

按顺序使用JQuery显示div

5 个答案: