javascript - How can I switch out two divs within one div on a time interval using jQuery? -
i trying code in bandzoogle website, might causing errors this, , have tried many different ways work. have tried changing css, showing , hiding objects, way seems remotely work. issue when loaded, divs switch once or twice, when should on infinite loop. i'm out of ideas, please help. keep in mind not styles present, of styling done through themes of website. of code have done.
.nextshow { color:#00000; -webkit-transition: 0.3s ease-in-out 0s; transition: 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; text-align:center; 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"> <a href="somelink show" id="nextshow_title" class="nextshow_title"> <div id="nextshow_title" class="nextshow_title"> <h2 class="nextshowtext1"> this text </h2> <h2 class="nextshowtext2">here more text </h2> </div> </a <a href="this link" id="new_album" class="new_album"> <div id="new_album" class="new_album"> <h2> all text here<br> </h2> <h1>is filler<br> </h1> <h2>and show code </h2> </div> </a> <script> $('.nextshow').ready(function() { setinterval( function() { $('.nextshow_title').css('display', 'none'); $('.new_album').css('display', 'block'); }, 8000); setinterval( function() { $('.nextshow_title').css('display', 'block'); $('.new_album').css('display', 'none'); }, 16000); }); </script>
try following code:
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); });
i feel better have 1 interval (for simplicity). takes variable (page1
) , toggles it, toggling visibility of divs.
edit: simpler way
$('.nextshow').ready(function() { setinterval(function() { $('.nextshow_title').toggle(); $('.new_album').toggle(); }, 8000); });
Comments
Post a Comment