对具有不同类的相同元素使用渐变

Using fade on same elements with different classes

本文关键字：元素 渐变 同类      更新时间：2023-09-26

我有多个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);
    });
});
});

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

  1. fadeIn() -显示匹配元素的淡出效果。
  2. fadeOut() -隐藏匹配的元素淡出/透明效果

这两个方法支持持续时间作为参数:慢、快或精确毫秒。

. fadeout()方法将匹配元素的不透明度变为动画。一旦不透明度达到0，则显示样式属性设置为none，因此元素不再影响页面的布局。持续时间以毫秒为单位;数值越高表示动画越慢，而不是越快。可以提供字符串'fast'和'slow'来分别表示持续时间为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>
相关文章：