wie man zwei div einzeln nacheinander zeigt

Question

Ich arbeite an der Entwicklung auf einer HTML-Seite, wo ich zwei div. Habe. In jedem Div habe ich ein Bild. Ich möchte, dass jedes Bild für 2 Sekunden sichtbar sein sollte und danach sollte das zweite Div sichtbar werden. Diese Funktion sollte wiederholt werden. Dazu habe ich folgenden Code verwendet.

Aber der obige Code funktioniert nicht und Bild in nicht sichtbar oder unsichtbar.

Answer 1

Sie von SetInterval Funktion anstelle von Timeout-Funktion

unten ist Beispielcode zu machen, könnte es jetzt arbeiten Sie bitte eine einwandfreie Funktion überprüfen. Hauptpunkt ist die Verwendung von Intervallfunktion machen

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

wenn Sie clearInterval (myInterval) stoppen wollen;

Answer 2

Ich glaube, dass Sie auch einen Fehler gemacht in das zweite Bild versteckt insted es anzuzeigen (innen SetTimeout):

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

Ich glaube, die zweite $(".logo-outernew").show(); sein sollte?

Answer 3

Sie können den modulo (z % Zeichen) Operator mit einer globalen Variablen, wenn hide oder show Ihre divs bestimmen.

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

Answer 4

standardmäßig verstecken Sie Ihre zweite div und innerhalb SetTimeout Ihren ersten Tauchgang verstecken und Ihre zweite div zeigen.

$(".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>

Answer 5

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

Alle 2 Sekunden es die Funktionen läuft und wenn Logo Außen nicht sichtbar ist, wird es sich zeigen, sonst, wenn sie es wird verstecken sichtbar ist.

Answer 6

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>

Answer 7

die Konsole entfernen und un-Kommentar die Linien mit Haut und Show-Funktion

 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); 
 
    

Answer 8

Sie können einfach Display keine für ein div ändern und verwenden Sie den folgenden Code wird es ausblenden und zeigen

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