按顺序显示使用JQuery的divs

我试图一个接一个地显示3个div。我想他们要显示的序列1,2,3,1,2,3，在....等..按顺序显示使用JQuery的divs

这是我使用

//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()); 
}

这显示代码三个divs，但没有延迟。我如何着手延迟并再次调用相同的函数。有没有更好的方法来做到这一点。

来源

2013-04-21 Tanuj Wadhwa

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

只需拨打window.setInterval(myFun, 1000);以外的功能myFun，一切正常。

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

另外，类别名称不应该以数字开头。

来源

2013-04-21 15:10:05 dersvenhesse

@gdoron W3说“他们不能以数字开头”（http://www.w3.org/TR/CSS2/syndata.html#characters）。 – dersvenhesse 2013-04-21 15:24:29

你说得对，我曾经阅读过（这里......）它只适用于ID和名称。 – gdoron 2013-04-21 15:48:42

你可以使用的setTimeout：

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

来源

2013-04-21 15:10:06

这可以帮助你：

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

foo();

但是这取决于真正原因躲藏。

来源

2013-04-21 15:10:06 gdoron

另一种方法

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

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/

来源

2013-04-21 15:18:45 RafH

为什么不期运用显示：无，而不是知名度？

你可以试试这个，是不是优雅，但只是解释元素可视性继承：使用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该工作示例

来源

2013-04-21 16:54:16 Magico

按顺序显示使用JQuery的divs

回答

相关问题