Question

好的大家，在这里进行第四个小时，我没有想法。在我的网站（http://www.jakerevans.com/my-story/）上，一旦你开始向下滚动，左边的菜单会像我想要的那样淡出。我希望菜单在用户到达底部时淡入页面或点击＆＃34;返回顶部＆＃34;右下角附近的按钮。这是控制此页面上所有内容的JavaScript：

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="http://www.jakerevans.com/wp-    content/themes/enfold-child/assets/css/timelinecss.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script>
var scrollPercent;
$(document).ready(function() {

/* Every time the window is scrolled ... */
$(window.parent).scroll( function(){



var oldHeader;
var currY = $(this).scrollTop();
var postHeight = $(this).height();
var scrollHeight = $('.timeline_container').height();
// Current percentual position
var scrollPercent = (currY / (scrollHeight - postHeight)) * 100;


    if(scrollPercent > 0 && scrollPercent < 89){
            $("#header", parent.document.body).animate({'opacity':'0'},1000);
        }

        if( scrollPercent > 4){

            $(".baby_pic").animate({'opacity':'1'});
        }

        if( scrollPercent > 7){

            $("#background-image-1", parent.document.body).animate({'opacity':'0'}, 1000);
            $("#background-image-2", parent.document.body).animate({'opacity':'1'}, 1000);
        }

        if( scrollPercent > 15){
            $("#background-image-2", parent.document.body).animate({'opacity':'0'}, 1000);
            $("#background-image-3", parent.document.body).animate({'opacity':'1'}, 1000);
        }

        if( scrollPercent > 20){

            $(".nerdy_child_text", parent.document.body).animate({'opacity':'1'}, 1000);
        }

       if( scrollPercent > 30){

            $(".nerdy_pic", parent.document.body).animate({'opacity':'1'}, 1000);
        }

       if( scrollPercent > 40){

            $(".nerdy_child_text_2", parent.document.body).animate({'opacity':'1'}, 1000);
       }


       if( scrollPercent > 50){

            $(".cloud_pic", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 60){

            $(".nerdy_child_text_2", parent.document.body).css({'visibility':'hidden'});
       }

       if( scrollPercent > 63){

            $(".nerdy_child_text_3", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 70){

            $(".nerdy_child_text_4", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 71){

        $(".cloud_pic", parent.document.body).css({'visibility':'hidden'});
        $(".book_pic", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 75){

            $(".nerdy_child_text_4", parent.document.body).css({'visibility':'hidden'});
       }

       if( scrollPercent > 80){

            $(".nerdy_child_text_5", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 81){

        $(".book_pic", parent.document.body).css({'visibility':'hidden'});
        $(".game_pic", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 85){

            $(".nerdy_child_text_5", parent.document.body).css({'visibility':'hidden'});
       }

       if( scrollPercent > 88){

            $(".nerdy_child_text_6", parent.document.body).animate({'opacity':'1'});
       }

       if( scrollPercent > 89){

        $(".game_pic", parent.document.body).css({'visibility':'hidden'});
        $(".girl_pic", parent.document.body).animate({'opacity':'1'});
        $("#header", parent.document.body).stop();
        $("#header", parent.document.body).css({'opacity':'1'});

       }




});

});
</script>
</head>

<body>

<div class="timeline_container">
<div class="main_timeline"></div>
<div class="top_line"></div>
<div class="regular_lines_1"></div>
<div class="regular_lines_2"></div>
<div class="decade_line"></div>
<div class="regular_lines_3"></div>
<div class="arrow_pic_div">
<a href="#anchor">
<img class="arrow_pic" src="http://www.jakerevans.com/wp-    content/uploads/2015/02/down-arrow-circle-hi1.png">
</a>
</div>
<div class="sample_banner">
<p class="banner_text_1">1987: Wichita, Kansas - Where it all began </p>
<div class="baby_div">
<img class="baby_pic" src="http://www.jakerevans.com/wp-content/uploads/2015/02/Untitled.png">
</div>
</div>
<p class="year_1987">The Story of Jake Evans</p>
<div class="sample_banner_2">
<p class="banner_text_2">Born to Tammy and Steven Evans</p>
</div>
<div class="sample_banner_3">
<p class="banner_text_3">At 12:03 PM</br>April 21st</br>1987...</p>
</div>
<div class="sample_banner_4">
<p class="banner_text_4">The Day the World Changed Forever...</p>
</div>
<div class="placement_object_1"></div>
</div>
</body>

任何人都有任何想法????在此先感谢!!!!

Answer 1

您应该拥有hidden类，其属性为opacity: 0隐藏元素。根据滚动位置，您可以根据是否要显示该元素来添加或删除此类。然后，将transition: .2s（或任何您想要的时间）添加到要显示和隐藏的元素（而不是hidden类）。当您添加和删除隐藏的类时，该元素将为淡入淡出设置动画。

反转CSS动画

1 个答案: