0

我试图一个接一个地显示 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，但没有延迟。我该如何进行延迟并再次调用相同的函数。有没有更好的方法来做到这一点。

4

5 回答 5

2

另一种方法

<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/

于 2013-04-21T15:18:45.130 回答
1

您将变量设置回xin1所以case 3我假设您想旋转。因此setInterval可能是正确的选择。

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

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

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

于 2013-04-21T15:10:05.587 回答
0

您可以使用 setTimeout：

window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);
window.setTimeout(myFun, 1000);
于 2013-04-21T15:10:06.780 回答
0

这可以帮助您：

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

foo();

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

于 2013-04-21T15:10:06.843 回答
0

为什么不使用 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()
                    })
               })
        })
    }

这里是这个工作示例

于 2013-04-21T16:54:16.643 回答