X秒钟后无循环显示/隐藏Divs系列

Question

On page load, I'm trying to show a div1 for 10 seconds and then hide it, show div2 for 3 seconds and then hide it, then show the last div3 without hiding it.

So I have in my css...

#show1, #show2, #show3 {display: none; }

In the html...

<div id="showhide">
<div id="show1">
<h2>Step 1: Checking if your area is eligible...</h2>
</div>
<div id="show2">
<h2>Success!</h2>
</div>
<div id="show3">
<h2>Just need to gather a little more information...</h2>
</div>
</div>

And a functioning show/hide script, but I'm not sure how to 1) make it not loop and 2) set different intervals for show/hide of div1 and div2.

$(function () {

var counter = 0,
divs = $('#show1, #show2, #show3');

function showDiv () {
divs.hide() // hide all divs
.filter(function (index) { return index == counter % 3; }) // figure out correct div to show
.show('fast'); // and show it

counter++;
}; // function to loop through divs and show correct div

showDiv(); // show first div    

setInterval(function () {
showDiv(); // show next div
}, 1 * 1000); // do this every 10 seconds    

});

Any help would be appreciated!

Answer 1

Added data-nextid="show2" data-showtimeout="10" class="hide-div" style="display:none;" to <div> tags.

data-nextid will have id of next div to show.

data-showtimeout will have value of display time for current div.

hide-div class is use for set all such div to hide at function call.

style="display:none;" to each div will hide all div initially.

Removed CSS #show1, #show2, #show3 {display: none; } #show1, #show2, #show3 {display: none; }

Added initial call for display first div displayDivWithTimer.apply($('#show1')); inside $(document).ready() .

 function displayDivWithTimer() { $(this).css('display', 'block'); var timeout = $(this).attr('data-showtimeout'); var nextid = $(this).attr('data-nextid'); //console.log("timeout:" + timeout + ", nextid:" + nextid); if (timeout && nextid) { setTimeout(() => { $('.hide-div').css('display', 'none'); displayDivWithTimer.apply($('#' + nextid)); }, parseInt(timeout) * 1000); } } $(document).ready(function() { displayDivWithTimer.apply($('#show1')); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <div id="showhide"> <div data-nextid="show2" data-showtimeout="10" id="show1" class="hide-div" style="display:none;"> <h2>Step 1: Checking if your area is eligible...</h2> </div> <div data-nextid="show3" data-showtimeout="3" id="show2" class="hide-div" style="display:none;"> <h2>Success!</h2> </div> <div id="show3" class="hide-div" style="display:none;"> <h2>Just need to gather a little more information...</h2> </div> </div>