按順序顯示使用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

回答

相關問題