当jQuery滚动页面时，jQuery淡出元素，当它们向后滚动时淡出
我希望元素在页面顶部滚动时淡出，然后在向后滚动到页面时淡入。 我写了一些有用的代码，但我正在寻找更优雅的解决方案。 这是我在jsfiddle上工作的解决方案： http ： //jsfiddle.net/wmmead/JdbhV/3/
我想找到一个更短，更优雅的代码，但是不能完全解决它。 也许有一个数组和each（）方法？ 如果我把一个类放在div而不是ID上，它会缩短很短的时间，但是它们会立刻淡出。 我希望每个框在页面滚动时淡出。
HTML
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); } });
你可以使用属性选择器'[attr="someattr"]'来使用jQuery的.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 } }); });
您可以在这里进行演示：
DEMO
这个版本的jsfiddle被认为是更好的，原因如下 ：
- function分解良好（分解为小function）：为您和其他编码人员提供更高的可读性，如果您需要更改某些内容，将来更容易维护。
- 灵活性：你可以改变盒子的数量，甚至不知道javascript！
- 效率：由于function分解，这意味着只有100％必要时才会调用每行代码
除了javascript之外，我还添加了除现有id之外的类。 例如： id="box1" class="box"
请享用 ：）
好吧，我想只为你所有的div设置一个类。 而不是用#id调用每个