8

要素がページの上部をスクロールするとフェードアウトし、ページにスクロールして戻るとフェードインします。機能するコードをいくつか書きましたが、より洗練されたソリューションを探しています。これが私がjsfiddleに取り組んでいる解決策です: http://jsfiddle.net/wmmead/JdbhV/3/

もっと短くてエレガントなコードを見つけたいのですが、うまくいきません。たぶん、配列と each() メソッドを使った何か？ID の代わりに div にクラスを配置すると、かなり短くなりますが、一度にすべてフェードアウトします。ページからスクロールすると、各ボックスがフェードアウトします。

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 に答える