如何在一段時間內使用jQuery在一個div內切換兩個div？

我想在Bandzoogle網站中編寫代碼，這可能會導致此錯誤，並且我嘗試了許多不同的方法來使其工作。我試圖改變CSS，顯示和隱藏對象，但這是遠程工作的唯一方式。問題是，加載時，div只會切換一次或兩次，當它們應該處於無限循環時。我全都沒有想法，請幫忙。請記住，並非所有的風格都存在，儘可能多的風格是通過網站的主題完成的。這是我所做的所有代碼。如何在一段時間內使用jQuery在一個div內切換兩個div？

.nextshow { 
 
color:#00000; 
 
-webkit-transition: all 0.3s ease-in-out 0s; 
 
transition: all 0.3s ease-in-out 0s; 
 
text-align: center; 
 
cursor: pointer; 
 
border:solid; 
 
height:150px; 
 
border-color:#747a85; 
 
box-shadow: none; 
 
padding:7px; 
 
} 
 

 
div.nextshow:hover { 
 
-moz-box-shadow: inset 0 0 20px #b3b3b3; 
 
-webkit-box-shadow: inset 0 0 20px #b3b3b3; 
 
box-shadow: inset 0 0 20px #b3b3b3; 
 
} 
 

 
.new_album { 
 
    color:#00000; 
 
    text-align: center; 
 
    cursor: pointer; 
 
    padding:1px; 
 
    display:none; 
 
} 
 

 
.nextshow_title { 
 
color:#00000; 
 
\t text-align:center; 
 
\t padding: none; 
 
} 
 

 
.nextshowtext2 { 
 
    font-size: 200%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<div class="nextshow"> 
 

 

 
\t <a href="somelink for show" id="nextshow_title" class="nextshow_title"> 
 
\t \t <div id="nextshow_title" class="nextshow_title"> 
 
\t \t \t <h2 class="nextshowtext1"> 
 
\t \t \t This is text 
 
\t \t \t </h2> 
 
\t \t \t <h2 class="nextshowtext2">here is more text 
 
\t \t \t </h2> 
 
\t \t </div> 
 
\t </a 
 

 
\t <a href="this is another link" id="new_album" class="new_album"> 
 
\t <div id="new_album" class="new_album"> 
 
\t \t <h2> 
 
\t \t All the text here<br> 
 
</h2> 
 
\t \t <h1>is just filler<br> 
 
</h1> 
 
\t \t <h2>and is just to show what the code is like 
 
\t \t </h2> 
 
\t </div> 
 
</a> 
 

 
\t 
 

 
<script> 
 

 
    $('.nextshow').ready(function() { 
 
\t setInterval(function() { 
 
    \t \t $('.nextshow_title').css('display', 'none'); 
 
\t \t $('.new_album').css('display', 'block'); 
 
    }, 8000); 
 
    \t setInterval(function() { 
 
    \t \t $('.nextshow_title').css('display', 'block'); 
 
\t \t $('.new_album').css('display', 'none'); 
 
    }, 16000); 
 
}); 
 
    
 
</script>

來源

2016-07-25 Devon Murray

試試下面的代碼：

var page1=true; 
    $('.nextshow').ready(function() { 
     setInterval(function() { 
      if(page1){ 
      $('.nextshow_title').css('display', 'none'); 
      $('.new_album').css('display', 'block');} 
      else{ 

      $('.nextshow_title').css('display', 'block'); 
      $('.new_album').css('display', 'none'); 
      } 
      page1=!page1; 
     }, 8000); 
    });

我覺得它最好是有一個時間間隔（爲簡單起見）。它所做的只是需要一些變量（page1）並切換它，切換div的可見性。

編輯：更簡單的方式

$('.nextshow').ready(function() { 
    setInterval(function() { 
     $('.nextshow_title').toggle(); 
     $('.new_album').toggle(); 
    }, 8000); 
});

來源

2016-07-25 19:01:22

的「第1頁」碼功能不錯，感謝您的幫助！我之前嘗試過切換，並且它不適用於CSS。 –

如果我正確理解你的問題，你應該只需要一個時間間隔。如果你對這些元素做了其他的事情，你也應該將它們設置爲一個出於性能方面的考慮。

$('.nextshow').ready(function() { 
 
    setInterval(function() { 
 
    $('.nextshow__title').toggle(); 
 
    $('.new_album').toggle(); 
 
    }, 8000); 
 
});

來源

2016-07-25 19:03:17

之前切換不起作用，但我的問題得到解答，無論如何。 –

如何在一段時間內使用jQuery在一個div內切換兩個div？

回答

相關問題