Question

我有多个div，我想要做的是当你将它滚出视图时淡出div。到目前为止，我只能使用一个div。有人可以告诉我该怎么做吗？

这是我的HTML：

<div class="jumbotron" id="jumbo1">
    <h2>Hello, world!</h2>

    <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis error eveniet
        expedita,
        fugit itaque, iusto
        laudantium libero modi nesciunt odit officiis optio possimus ratione repellat, sit suscipit temporibus
        vitae
        voluptatum. </p>

    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

<div class="jumbotron" id="jumbo2">
    <h2>Hello, world!</h2>

    <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis error eveniet
        expedita,
        fugit itaque, iusto
        laudantium libero modi nesciunt odit officiis optio possimus ratione repellat, sit suscipit temporibus
        vitae
        voluptatum. </p>

    <p><a class="btn btn-primary btn-lg" role="button">Learn more</a></p>
</div>

这是jquery

 $(document).ready(function () {
$(function(){
    var fadeBegin = 200,
        fadeFinish = 500,
        fadingElement = $('#jumbo1');

    $(window).on('scroll', function(){
        var offset = $(document).scrollTop(), opacity = 0;
        console.log(offset);
        if( offset <= fadeBegin ){
            opacity = 1;
        } else if( offset <= fadeFinish ){
            opacity = 1 - offset / fadeFinish;

        }
        fadingElement.stop().animate({opacity: opacity}, 100);
    });

});

});

Answer 1

我不擅长英语。无论如何我要解释我的代码

fadeIn（） - 显示具有淡入效果的匹配元素。
fadeOut（） - 隐藏具有淡出/透明效果的匹配元素。

这两种方法的支持持续时间为参数：慢，快或精确毫秒。

.fadeOut（）方法可以设置匹配元素的不透明度。一旦不透明度达到0，显示样式属性将设置为none，因此该元素不再影响页面的布局.Duration以毫秒为单位给出;值越高表示动画越慢，而动画越快。字符串＆＃39;快速＆＃39;并且“慢”＆＃39;可以提供分别指示200和600毫秒的持续时间。如果提供了任何其他字符串，或者省略了duration参数，则使用400毫秒的默认持续时间。

现在试试这段代码吧。

 <!doctype html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>fadeOut demo</title>
 <style>
 p {
 font-size: 150%;
 cursor: pointer;
 }
 </style>
 <script src="//code.jquery.com/jquery-1.10.2.js"></script>
 </head>
 <body>
 <div class="jumbotron" id="jumbo">
 <h2>Hello, world!</h2>
 <p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis   error eveniet expedita,fugit itaque, iusto laudantium libero modi nesciunt odit officiis  optio possimus ratione repellat, sit suscipit temporibus vitae
    voluptatum. </p>
</div>
<div class="jumbo" id="jumbo1">
<h2>Hello, world!</h2>
<p class="lead"> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis   error eveniet expedita,fugit itaque, iusto laudantium libero modi nesciunt odit officiis optio possimus ratione repellat, sit suscipit temporibusvitae voluptatum. </p>
 </div>
 <script>
 $( ".jumbotron" ).click(function() {
 $( ".jumbotron" ).fadeOut( "slow" );
 });
 $( ".jumbo" ).click(function() {
 $( ".jumbo" ).fadeIn("slow" );
 });
 </script>
 </body>
 </html>

在不同类的相同元素上使用淡入淡出

1 个答案: