Slide Trasitions

by JThomas

HTML

<div class="intro">
    <h1>intro</h1>
</div>

<div class="hide pres">
    <h2>presentation</h2>
</div>
        
<div class="hide cred">
    <h3>Credits</h3>
</div>

<div class="hide blank">
    <h4>My blank screen which isn't so blank...</h4>
</div>

<button id="Next" type="button">Next</button>

CSS

.hide {
    display: none;
}

JavaScript

currentSlide = 0;

//The number would match the slide you want the transition to occur at
var slideIndexes = {
            3 : function() { $('.intro').fadeOut(100); $('.pres').fadeIn(100); },
            16 : function() { $('.pres').fadeOut(100); $('.cred').fadeIn(100);},
            20 : function () { $('.cred').fadeOut(100); $('.blank').fadeIn(100);}
};

$("#Next").click(function(e){
    
    currentSlide++;
    console.log(currentSlide);
    
    if (slideIndexes[currentSlide]) slideIndexes[currentSlide]();
});