0

我有一个动画小介绍的功能，但我想在那里放一个跳过按钮，这样如果人们不想看这个简短的介绍，它会立即加载页面而没有介绍。但是，当我尝试这样做时，它似乎不起作用？这是Javascript代码：

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

谁能看到我哪里出错了？

干杯

4

2 回答 2

0

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

您不能跳过对delay()jQuery 的调用。如果您需要更多控制，我建议使用本机 JavaScript 超时。

于 2012-11-28T14:10:02.293 回答
0

您需要先停止其他动画。

如果没有要查看的小提琴或其他演示，我最好的猜测是您正在尝试淡入页面内容而没有首先停止已经开始的动画/效果。你不能简单地调用一个冲突的动画/效果而不首先杀死前一个动画/效果。

要停止正在运行的动画/效果，您需要使用 jQuery 的.stop()方法。


如果您有任何问题，请告诉我。祝你好运！:)

于 2012-11-28T14:07:22.887 回答