Hey there! I'm currently struggling with implementing transitions for my tool tips. Any assistance would be greatly appreciated!
I am looking to have my "fader" divs fade in and out on click of a button, with each transition lasting 5 seconds. It's like a quick tutorial for my new UI.
Below is the code I've been working on:
JS
function fadeLoop() {
var counter = 0,
divs = $('.fader').hide(),
dur = 500;
function showDiv() {
divs.fadeOut(dur)
.filter(function(index) {
return index == counter % divs.length;
})
.delay(dur)
.fadeIn(dur);
counter++;
};
showDiv();
return setInterval(function() {
showDiv();
}, 5 * 1000);
};
$(function() {
var interval;
$("#start").click(function() {
if (interval == undefined){
interval = fadeLoop();
$(this).val("Stop");
}
else{
clearInterval(interval);
$(this).val("Start");
interval = undefined;
}
});
});
HTML
<div class="fader">
<div id="tutorial1" class="tutorial createquestion1">
<div class="arrow-w" style="font-size:1em;" >
</div>
Start by creating a title and selecting a folder for your question to be stored in.
</div>
</div>
<div class="fader">
<div id="tutorial2" class="tutorial createquestion2">
<div class="arrow-w" style="font-size:1em;" >
</div>
Categories are key to your reporting effectiveness, be sure to include categories that relate to this question.
</div>
</div>
... (additional HTML fader elements)
<input type="button" value="Start" name="Start" />
CSS
.tutorial {
display: table;
border: 4px solid #8C3087;
...
.createquestion6 {
top:140px;
left:100px;
text-align:right !important;
}