在页面加载时，使用 jQuery 淡入淡出一个又一个 div

Posted 2023-05-08

【中文标题】在页面加载时，使用 jQuery 淡入淡出一个又一个 div

【英文标题】：On page load, fading in and out one div after another with jQuery

【发布时间】：2012-10-29 04:48:00

【问题描述】：

我正在制作我的个人网站，我想做的是一个简单的动画。

代码如下：

<div class="wrapper">--- Main website body ---</div>
<div class="intro1">
    <div class="name1">John</div>
    <div class="name2">Doe</div>
</div>
<div class="intro2">
    <div class="prof1">Designer</div>
    <div class="prof2">Developer</div>
</div>​


<style>
    body background: rgba(0,0,0,1); margin: 0px; padding: 0px; color: rgba(255,255,255,1); 
    .wrapper width:100%; height:100%; max-height: 100%; background: rgba(0,0,0,1); display: none;
    .intro1 width: 500px; height: 150px; margin: 40% auto 0% auto; padding: 0px; display: none;
    .intro2 width: 500px; height: 150px; margin: 40% auto 0% auto; padding: 0px; display: none;
</style>


$(function() 
    $('.intro1').fadeIn(1000).fadeOut(1000);
    $(function() 
        $('.intro2').fadeIn(1000).fadeOut(1000);
    );
);​

以下是应该发生的事情的细分：

以简单的黑色背景加载页面 Div (.intro1) 慢慢淡入，可能从顶部滑入并向下滑动 Div (.intro1) 慢慢淡出，可能向下滑动，然后完全移除元素 Div (.intro2) 慢慢淡入，可能从顶部滑入并向下滑动 Div (.intro2) 慢慢淡出，可能向下滑动，然后完全移除元素 Div (.wrapper) 慢慢淡入

这是我目前所拥有的，我不确定接下来需要做什么。

这里是链接：http://jsfiddle.net/gVp7m/

【问题讨论】：

你应该使用回调函数，作为fadeOut的参数。

不要忘记给有用的 ppls upticks 并检查一个合适的答案！ :D

【参考方案1】：

试试这个：

$(function() 
    $('.intro1').fadeIn(1000).fadeOut(1000, function()
       $('.intro2').fadeIn(1000).fadeOut(1000);
    );
);​

【讨论】：

哦！那效果很好。 .intro2 淡出后，我是否只对 .wrapper 做同样的事情？

像这样：$(function() $('.intro1').fadeIn(1000).fadeOut(1000, function() $('.intro2').fadeIn(1000).fadeOut(1000, function() $('.wrapper').fadeIn(1000); ); ); );​

效果很好，非常感谢您的帮助。是否可以让元素在淡入的同时滑入？

【参考方案2】：

简单，第一个动画完成后使用回调函数触发下一个动画:)

Fiddle

$(function() 

$('.intro1').fadeIn(1000).fadeOut(1000, function() 

    $('.intro2').fadeIn(1000).fadeOut(1000, function() 

        $('.wrapper').fadeIn(1000);

    );

);

);

【讨论】：

看起来棒极了，谢谢！是否可以像这样为淡入和淡出设置动画：jsfiddle.net/gVp7m 但使用您的格式？

【参考方案3】：

例如，您可以这样做。 它看起来比实际上更复杂

$(function() 
    function showIntro(nr)
        $('.intro'+nr).css(
            'margin-top':'20%',
            'display':'block',
            'opacity':0)
            .animate(
                'margin-top':'40%',
                'opacity':1,2000,function()

                $(this).delay(1000).animate(
                    'margin-top':'60%',
                    'opacity':0,2000,function()

                        $(this).remove();
                        if(nr==1)
                            showIntro(2);
                        else if(nr==2)
                            $('.wrapper').fadeIn(2000);
                        
                );          
        );
    ;

    showIntro(1);
);​

演示：http://jsfiddle.net/gVp7m/4/

【讨论】：

知道了，看起来棒极了！非常感谢！

【参考方案4】：

这样的事情怎么样：

jsFiddle - would something like this do?

如果需要更多解释，请告诉我。为了便于阅读，我将其拆分为空格。

CSS

body background: rgba(0,0,0,1); margin: 0px; padding: 0px; color: rgba(255,255,255,1); 
#Splash  position: fixed; top:0; left: 0; height: 100%; width: 100%; background: black; 
.wrapper width:100%; height:100%; max-height: 100%; background: rgba(0,0,0,1); 
.intro1   
.intro1 div  position: absolute; bottom: .5em; opacity: 0; 
.intro1 .name1  left: .5em; 
.intro1 .name2  right: .5em; 
.intro2   
.intro2 div  position: absolute; opacity: 0; 
.intro2 .prof1  left: 40%; 
.intro2 .prof2  right: 40%; 

脚本

$(".intro1 div").animate( opacity: 1 , 2000);

$(".intro1 .name1").animate(
    left: "40%",
    top: ".5em"
, 3000);
$(".intro1 .name2").animate(
    left: "60%",
    top: ".5em"
, 3000);

$(".intro1 div").animate( opacity: 0 , 2000, function(e) 
    $(".intro2 div").animate( opacity: 1 , 2000);

    $(".intro2 .prof1").animate(
        left: ".5em",
        bottom: ".5em"
    , 3000);
    $(".intro2 .prof2").animate(
        right: ".5em",
        bottom: ".5em"
    , 3000);

    $(".intro2 div").animate( opacity: 0 , 2000, function(e) 
        $("#Splash div").hide();
        $("#Splash").fadeOut(3000);
    );
);

【讨论】：

哈哈，太棒了！感谢您的反馈，我一定会再看看。

@p4trk 添加了“再做一次”按钮，很有趣，：P