I created this to make an div containing an intro dissappear after so many milliseconds. It also has a 'skip intro' link at the bottom. Everything works fine, except, the first function seems to fire even after somebody has skipped the intro. So there's a quick flicker as the div reloads. I have an if statement in it that I thought would solve the problem, but I think the clock starts when the page loads, before anyone has had a chance to click 'skip'. I tried to add another if statement inside the function, but it killed the script?
Damn! Being a beginner suckssss!
if($("#slidestart").css("display") == "block"){
setTimeout( function(){
// adding this didn't work::: if($("#slidestart").css("display") == "block"){
$('#slidestart').stop().animate({ opacity: 0 }, 400, function() {
$("#slidestart").css({display:"none"},100);
setTimeout( function(){
$("#allbut").css({display:"block",opacity:0},100);
$('#allbut').stop().animate({ opacity: 1 }, 400, function() {
$('#slidestart').html(' ');
});
},255);
});
$('#allbut').stop().animate({ opacity: 1 }, 200, function() { /* animation complete */ });
},22355);
// };
};
$("#skip_intro").on("click", function(){
$('#slidestart').stop().animate({ opacity: 0 }, 300, function() {
$("#slidestart").css({display:"none"},100);
setTimeout( function(){
$("#allbut").css({display:"block",opacity:0},100);
$('#allbut').stop().animate({ opacity: 1 }, 400, function() {
$('#slidestart').html(' ');
});
},255);
});
$('#allbut').stop().animate({ opacity: 1 }, 200, function() { /* animation complete */ });
});