I have a function that animates a little intro but I want to put a skip button on there so that it will load the page straight away without the intro if the person wishes to not watch this short intro. However, when I have tried to do this it does not seem to work? Here is the Javascript code:
$(document).ready(function() {
$(window).bind("unload", function() {
});
imageresize();
aboutdisplay();
pageload();
intro();
start();
jQuery.easing.def = "easeOutElastic";
$("#bg a").click(function(event){
event.preventDefault();
});
var $backgrounds = $('#bg li img');
var $menu_items = $('#menu li a');
$menu_items.hover(function(event){
event.preventDefault();
var $bg = $backgrounds.eq($menu_items.index(this));
$bg.stop(true, false).animate({opacity:"1"},500, 'linear');},
function() {
var $bg = $backgrounds.eq($menu_items.index(this));
$bg.stop(true, false).delay(250).animate({opacity:"0"},750, 'linear');
});
$("a.skip").click(function(event){
event.preventDefault();
skip();
});
$("a.close2").click(function(event){
event.preventDefault();
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0"},500, 'linear');
$("#menu").animate({opacity:"1", 'top':"50%"}, 1000);
$("#menu2").animate({'left':"-1500px"},500);
$("#border2").animate({'height':"50px"},500, 'linear');
});
$("a.transition2").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#about").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition2_1").click(function(event){
event.preventDefault();
$("#about").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition3").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#modelling").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition3_1").click(function(event){
event.preventDefault();
$("#modelling").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition4").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#photography").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition4_1").click(function(event){
event.preventDefault();
$("#photography").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition5").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#video").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition5_1").click(function(event){
event.preventDefault();
$("#video").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition6").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#graphics").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition6_1").click(function(event){
event.preventDefault();
$("#graphics").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition7").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#webdesign").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition7_1").click(function(event){
event.preventDefault();
$("#webdesign").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#contact").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
$("a.transition8").click(function(event){
event.preventDefault();
$("#menu2").animate({'left':"-20px"},2000);
$("#contact").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
$("#border2").animate({'height':"75px"},1000, 'linear');
});
$("a.transition8_1").click(function(event){
event.preventDefault();
$("#contact").delay(500).animate({'opacity':"1",'top':"10px"},1000);
$("#modelling").animate({'top':"-1000px"},500, 'linear');
$("#about").animate({'top':"-1500px"},500, 'linear');
$("#graphics").animate({'top':"-1000px"},500, 'linear');
$("#webdesign").animate({'top':"-1000px"},500, 'linear');
$("#video").animate({'top':"-1000px"},500, 'linear');
$("#photography").animate({'top':"-1000px"},500, 'linear');
$("#fade").animate({opacity:"0.9"},500, 'linear');
$("#menu").animate({opacity:"0", 'top':"-100%"}, 500, 'linear');
});
});
function imageresize() {
var bodywidth = $('#photography').width();
if ((bodywidth) < '1450'){
$('#photophotos img').css({'width':'150px', 'height':'112px'});
$('#videophotos img').css({'width':'150px', 'height':'112px'});
$('#graphicsphotos img').css({'width':'150px', 'height':'112px'});
$('#webphotos img').css({'width':'250px', 'height':'187px'});
$('#modelphotos img').css({'width':'150px', 'height':'112px'});
$('#menu2').css({'font-size':'0.8em'});
$('#aboutbio').css({'width':'560px','font-size':'1em'});
$('#aboutphotos img').css({'width':'200px', 'height':'150px'});
} else {
$('#photophotos img').css({'width':'250px', 'height':'187px'});
$('#videophotos img').css({'width':'250px', 'height':'187px'});
$('#graphicsphotos img').css({'width':'250px', 'height':'187px'});
$('#webphotos img').css({'width':'325px', 'height':'243px'});
$('#modelphotos img').css({'width':'250px', 'height':'187px'});
$('#menu2').css({'font-size':'1.3em'});
$('#aboutbio').css({'width':'700px', 'font-size':'1.2em'});
$('#aboutphotos img').css({'width':'250px', 'height':'187px'});
}
}
$(window).bind("resize", function(){//Adjusts image when browser resized
imageresize();
});
function aboutdisplay() {
var bodywidth = $('#photography').width();
if ((bodywidth) < '1050'){
$('#aboutphotos').css({'display':'none'});
} else {
$('#aboutphotos').css({'display':'block'});
}
}
$(window).bind("resize", function(){//Adjusts image when browser resized
aboutdisplay();
});
function pageload(){
$('#bg').hide();
$('#border').hide();
$('#menu').hide();
$('#words p').hide();
$('#social').hide();
$('#border2').hide();
}
function intro(){
$('#words2 ul').animate({'margin-top':'300px'}, 500, 'linear').delay(200).animate({'margin-top':'250px'}, 500, 'linear').delay(200)
.animate({'margin-top':'200px'}, 500, 'linear').delay(200).animate({'margin-top':'150px'}, 500, 'linear').delay(200)
.animate({'margin-top':'100px'}, 500, 'linear').delay(200).animate({'margin-top':'50px'}, 500, 'linear').delay(200)
.animate({'margin-top':'0px'}, 500, 'linear');
}
function start(){
$('#words2').delay(7500).fadeOut(500, 'linear');
$('#bg').delay(6500).fadeIn(1000, 'linear');
$('#border').delay(7500).fadeIn(1000, 'linear');
$('#border2').delay(7500).fadeIn(1000, 'linear');
$('#menu').delay(8000).fadeIn(1000, 'linear');
$('#words p').delay(8000).fadeIn(1000, 'linear');
$('#social').delay(9000).fadeIn(1000, 'linear');
}
function skip(){
$('#words2').fadeOut(500, 'linear');
$('#bg').fadeIn(1000, 'linear');
$('#border').fadeIn(1000, 'linear');
$('#border2').fadeIn(1000, 'linear');
$('#menu').fadeIn(1000, 'linear');
$('#words p').fadeIn(1000, 'linear');
$('#social').fadeIn(1000, 'linear');
}
Can anyone see where I am going wrong?
Cheers
You should use .stop() with the clearQueue parameter set to true if you're just trying to skip animations.
function skip(){
$('#words2').stop(true).fadeOut(500, 'linear');
$('#bg').stop(true).fadeIn(1000, 'linear');
$('#border').stop(true).fadeIn(1000, 'linear');
$('#border2').stop(true).fadeIn(1000, 'linear');
$('#menu').stop(true).fadeIn(1000, 'linear');
$('#words p').stop(true).fadeIn(1000, 'linear');
$('#social').stop(true).fadeIn(1000, 'linear');
}
You can't skip calls to delay() with jQuery. I suggest using native JavaScript timeouts if you need more control.