在JQuery中跳過動畫功能

我有一個動畫小小介紹的功能，但是我想在其上放一個跳過按鈕，這樣它會在沒有介紹的情況下立即加載頁面，如果這個人不想看這個簡短的介紹。但是，當我試圖做到這一點似乎並沒有工作？這裏是Javascript代碼：在JQuery中跳過動畫功能

$(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'); 
}

任何人都可以看到我要去哪裏錯了嗎？

乾杯

來源

2012-11-28 Adslatham

如果您只是想跳過動畫，則應該使用.stop()並將clearQueue參數設置爲true。

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'); 
}

您不能跳過使用jQuery調用delay()。如果您需要更多控制，我建議使用原生JavaScript超時。

來源

2012-11-28 14:10:02 Intelekshual

是的！謝啦 – Adslatham

您需要先停止其他動畫。

沒有一個小提琴或其他演示來看，我最好的猜測是你試圖褪色的網頁內容沒有首先停止已經開始的動畫/效果。沒有先殺死以前的動畫/效果，你不能簡單地調用衝突的動畫/效果。

要停止正在運行的動畫/效果，您需要使用jQuery的.stop()方法。

讓我知道如果您有任何問題。祝你好運！ :)

來源

2012-11-28 14:07:22

在JQuery中跳過動畫功能

回答

相關問題