8

我希望元素在滚动离开页面顶部时淡出，然后在滚动回页面时淡入。我写了一些有效的代码，但我正在寻找一个更优雅的解决方案。这是我在 jsfiddle 上工作的解决方案：http: //jsfiddle.net/wmmead/JdbhV/3/

我想找到一段更短、更优雅的代码，但无法完全解决。也许有一个数组和 each() 方法？如果我在 div 上放置一个类而不是一个 ID，它会变得更短，但它们会立即消失。我希望每个框在滚动离开页面时淡出。

HTML

<div id="box1"></div>
<div id="box2"></div>
<div id="box3"></div>
<div id="box4"></div>
<div id="box5"></div>
<div id="box6"></div>

CSS

#box1, #box2, #box3, #box4, #box5, #box6 {
  width: 100px;
  height: 100px;
  background: orange;
  margin:100px auto;
}
#box6 {
  margin-bottom:600px;
}

jQuery

var box1Top = $('#box1').offset().top;
var box2Top = $('#box2').offset().top;
var box3Top = $('#box3').offset().top;
var box4Top = $('#box4').offset().top;
var box5Top = $('#box5').offset().top;
var box6Top = $('#box6').offset().top;

$(window).scroll(function () {
if ((box1Top - $(window).scrollTop()) < 20) {
    $('#box1').stop().fadeTo(100, 0);
} else {
    $('#box1').stop().fadeTo('fast', 1);
}

if ((box2Top - $(window).scrollTop()) < 20) {
    $('#box2').stop().fadeTo(100, 0);
} else {
    $('#box2').stop().fadeTo('fast', 1);
}

if ((box3Top - $(window).scrollTop()) < 20) {
    $('#box3').stop().fadeTo(100, 0);
} else {
    $('#box3').stop().fadeTo('fast', 1);
}

if ((box4Top - $(window).scrollTop()) < 20) {
    $('#box4').stop().fadeTo(100, 0);
} else {
    $('#box4').stop().fadeTo('fast', 1);
}

if ((box5Top - $(window).scrollTop()) < 20) {
    $('#box5').stop().fadeTo(100, 0);
} else {
    $('#box5').stop().fadeTo('fast', 1);
}
if ((box6Top - $(window).scrollTop()) < 20) {
    $('#box6').stop().fadeTo(100, 0);
} else {
    $('#box6').stop().fadeTo('fast', 1);
}
});
4

3 回答 3

9

您可以使用jQuery'[attr="someattr"]'的方法来使用属性选择器：.each()

$(window).scroll(function () {
   $('[id^="box"]').each(function () { // <---loop the divs id starts with #box 
      if (($(this).offset().top - $(window).scrollTop()) < 20) { //<---mark the $(this).offset().top of current object
          $(this).stop().fadeTo(100, 0); //<----fadeOut the current obj
      } else {
          $(this).stop().fadeTo('fast', 1); //<----fadeIn the current obj
      }
   });
});

您可以在这里进行演示：

演示

于 2013-04-09T06:07:14.120 回答
1

由于以下几个原因，您的 jsfiddle 版本被认为更好：

  • 良好的功能分解（分解为小功能）：为您和其他编码人员提供更高的可读性，并且如果您需要更改某些内容，将来更易于维护。
  • 灵活性：你可以改变盒子的数量，甚至不知道javascript！
  • 效率：由于功能分解，这意味着每行代码只有在 100% 必要时才会被调用

除了 javascript，除了现有的 id 之外，我还添加了类。例如：id="box1" class="box"

请享用 ：）

于 2013-04-09T06:37:31.033 回答
0

好吧，我想只是为你所有的 div 设置一个类。而不是用#id调用每个

于 2013-04-09T05:54:41.803 回答