Question

我试图在每个人使用jQuery接近页面顶部时淡出图像。我目前正在使用以下jQuery代码，它工作正常：

$(window).scroll(function(){
     $(".fade1").css("opacity", 1 - $(window).scrollTop() / 50);
});

但是，我必须为每个img添加一个新类，并为每个实例继续重复这一小块代码，但是我应该能够执行for循环来查找具有类.fade的每个父类，然后运行每个图像靠近视口顶部时的淡入淡出功能。

此代码也有效，但同时淡出所有图像......

$( document ).ready(function() {

  $( ".fade" ).each(function( index ) {
    if($(this).find('img').length > 0){

      $(window).scroll(function(){
          $("img").css("opacity", 1 - $(window).scrollTop() / 50);
      });
     }
  });

});

我认为问题是，我需要声明当找到每个父（div.fade）时，对他们的孩子img执行此操作，但我不知道如何在不破坏函数的情况下声明它。

当他们进入底部的视口时，我也喜欢让它们淡入，但一次只有一件事...... :-)

Answer 1

这对我有用。确保使用＆＃39; fade1＆＃39;不只是＆＃39;淡出＆＃39;

<script src="~/Scripts/jquery-1.9.1.min.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $(".fade1").each(function (index) {
            if ($(this).find('img').length > 0) {
                $(window).scroll(function () {
                    $(".fade1").css("opacity", 1 - $(window).scrollTop() / 1000);
                });
            }

Lots of text... 
<div class="fade1">
    <img src="~/Images/orderedList4.png" class="fade1" />
</div>
<div class="fade1">
    <img src="~/Images/orderedList4.png" class="fade1" />
</div>
        });
    });
</script>
Lots of text...

Answer 2

所以，我最终用它来创建一个效果，当它们滚动到视图中时，框会以略微不同的速度淡入：

.extra-space {
    height: 500px;
    border: 1px solid red;
    width: 100%;
}
.box {
    opacity: 0;
}
.info-boxes-section {
    padding: 20px 0;
}
.info-box p, .info-box a {
    margin: 0;
    font-size: 0.9rem;
}
.info-box {
    vertical-align: top;
    width: 49.2%;
    display: inline-block;
    text-align: center;
}
.info-box img {
    width: 100%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="extra-space"></div>
<div class="white-full-width">
	<div class="info-boxes-section">
		<div class="info-boxes-wrapper">
    
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade3">
        <img class="fade3" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade">
        <img class="fade" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>
      
      <article class="box info-box fade2">
        <img class="fade2" src="https://i.ytimg.com/vi/tntOCGkgt98/maxresdefault.jpg" data-pin-nopin="nopin">
      </article>

    </div>
  </div>
</div>

void Main()
{
    double[] marks = new double[10];

    Console.WriteLine("Please enter in 10 marks below: ");

    for (int i = 0; i < 10; i++)
    {
        marks[i] = Convert.ToDouble(Console.ReadLine());
    }

    Console.WriteLine("You passed {0} subjects.", marks.Where(mark => mark >= 50).Count());

    Console.ReadLine();
}

当每个图像接近视口顶部时淡出

2 个答案: