如何重複顯示兩個div一個一個

我正在開發一個Html頁面，我有兩個div。在每個div中我都有一個圖像。我希望每個圖像都應該可見2秒，之後第二個div應該可見。這個功能應該重複。爲此我使用下面的代碼。如何重複顯示兩個div一個一個

<script type="text/javascript"> 
$(document).ready(function() { 
    $(".logo-outer").show(); 
    setTimeout(function() { 
     $(".logo-outer").hide(); 
     $(".logo-outernew").hide(); 
    }, 2000); 
}); 
</script>

但上面的代碼不工作，圖像不可見或不可見。

來源

2017-09-13 Sunny Sandeep

我不知道解決這個任何人都可以解決這個問題。 –

，您可以利用SetInterval功能，而不是超時功能

下面

是示例代碼，也許現在的工作請檢查正常功能。主要的一點是利用間隔功能

var myInterval = setInterval(function() { 
     if($(".logo-outer").is(':visible')) 
     { 
      $(".logo-outer").hide(); 
      $(".logo-outernew").show(); 
     } 
     else 
     { 
      $(".logo-outer").show(); 
      $(".logo-outernew").hide(); 
     } 
     },2000);

的，如果你想停止 clearInterval（myInterval）;

來源

2017-09-13 11:21:31

它適合我。 –

我相信你也躲在第二圖像作出了錯誤insted的顯示它（裏面的setTimeout）的：

 $(".logo-outer").hide(); 
    $(".logo-outernew").hide();

我相信，第二個應該是$(".logo-outernew").show();？

來源

2017-09-13 11:25:32 Emayla

可以使用modulo（例如%號）運算符和全局變量來確定何時hide或show您的div。

var count = 0; 
$(document).ready(function() { 
    $(".logo-outer").show(); 
    setTimeout(function() { 
     if(count % 2 == 0) { 
      $(".logo-outer").hide(); 
      $(".logo-outernew").show(); 
     } else { 
      $(".logo-outer").show(); 
      $(".logo-outernew").hide(); 
     } 
     count++; 
    }, 2000); 
});

來源

2017-09-13 11:27:33

默認隱藏你的第二個div和裏面setTimeout隱藏你的第一個潛水，並顯示你的第二個div。

$(".logo-outer").show(); 
 
    $(".logo-outernew").hide(); 
 
    setTimeout(function() { 
 
     $(".logo-outer").hide(); 
 
     $(".logo-outernew").show(); 
 
    }, 2000);

.logo-outer { 
 
    background:red; 
 
    width: 50vw; 
 
    height: 50vw; 
 
} 
 
.logo-outernew { 
 
    background:green; 
 
    width: 50vw; 
 
    height: 50vw; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="logo-outer"> 
 
    <h1>1 div</h1> 
 
</div> 
 
<div class="logo-outernew"> 
 
    <h1>2 div</h1> 
 
</div>

來源

2017-09-13 11:30:11

setInterval(function() { 
    if ($(".logo-outer").css("display") == "none"){ 
     $(".logo-outer").show(); 
    } 
    else{ 
     $(".logo-outer").hide(); 
    } 
}, 2000);

它運行的功能，如果標誌外不可見，它會顯示它，否則，如果是可見它會隱藏每2秒。

來源

2017-09-13 11:30:53 user5014677

對我來說很好。 –

function swapImage() { 
 
       $('.img02').fadeOut(); 
 
       $('.img01').fadeIn(); 
 
       setTimeout(function() { 
 
        $('.img02').fadeIn(); 
 
        $('.img01').fadeOut(); 
 
       }, 2000); 
 
       setTimeout(function() { 
 
        swapImage(); 
 
       },4000) 
 
      } 
 
      $(document).ready(function() { 
 
       swapImage(); 
 
      });

.img01, 
 
      .img02{ 
 
       width: 200px; 
 
       height: 200px; 
 
       position: absolute; 
 
      } 
 
      .img01{ 
 
       background: green; 
 
      } 
 
      .img02{ 
 
       background: red; 
 
      }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<div class="img01"></div> 
 
<div class="img02" style="display: none;"></div>

來源

2017-09-13 11:35:17

刪除控制檯和取消註釋與隱藏和顯示功能線

 var time_to_display = 2000; 
 
     var img1 = setInterval(function() { 
 
     console.log("Img1"); 
 
     //   $(".logo-outer").hide(); 
 
      //  $(".logo-outernew").show(); 
 
      
 
       }, time_to_display * 2); 
 
       
 
     setTimeout(function(){ 
 
     var img2 = setInterval(function() { 
 
     console.log("Img2"); 
 
      //  $(".logo-outernew").hide(); 
 
      // $(".logo-outer").show(); 
 
       }, time_to_display * 2); 
 
     },2000);

來源

2017-09-13 11:37:22

您可以簡單地改變顯示一格到無並使用下面的代碼將它隱藏並顯示

<script> 
    $(document).ready(function(){ 
     setInterval(function(){ 
     $("div.logo-outer, div.logo-outernew").toggle(1000); 
    }, 3000) 
    }); 
</script>

來源

2017-09-13 12:23:28

如何重複顯示兩個div一個一個

回答

相關問題