2

これは私が最初から作成しようとしている最初のスクリプトなので、ご容赦ください。

私が作成しようとしているのは、9 つ​​の div のグリッドです。マウスを div に合わせると、他の 8 つの div が .25 の不透明度にフェードします。次に、マウスがグリッド上にある限り、「1」の不透明度レベルがマウスに従います。マウスがどこにあっても不透明度は 1 (実際には .999) で、他の場所では .25 です。

マウスがグリッド領域から完全に出ると、すべての div が 1 の不透明度に戻ります。

私はそれが非常に複雑であることを知っているので、ここで jsfiddle を作成しました: http://jsfiddle.net/Cooperdale/AKuKx/15/

ゆっくり動かすと実際には機能しますが、スクリプトの信頼性が低すぎます。マウスを速く動かすと、div のグループが「オン (1)」になり、他の div が「オフ (0.25)」になるなど、予測できない結果が生じる可能性があります。 .

これは私が書いたスクリプトです：

    $(function() {

    $('#jazzmen').mouseleave(function() {
        $('#sq1').css({ opacity: 1 });
        $('#sq2').css({ opacity: 1 });
        $('#sq3').css({ opacity: 1 });
        $('#sq4').css({ opacity: 1 });
        $('#sq5').css({ opacity: 1 });
        $('#sq6').css({ opacity: 1 });
        $('#sq7').css({ opacity: 1 });
        $('#sq8').css({ opacity: 1 });
        $('#sq9').css({ opacity: 1 });
    }
    );


  $('.music9').hover(function() {
    if ($(this).css('opacity') == 1) {
        $(this).css({ opacity: 0.999 });
        if (this.id !== 'sq1') {
            $('#sq1').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq2') {
            $('#sq2').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq3') {
            $('#sq3').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq4') {
            $('#sq4').animate({opacity: 0.25}, 500);
        }        
        if (this.id !== 'sq5') {
            $('#sq5').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq6') {
            $('#sq6').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq7') {
            $('#sq7').animate({opacity: 0.25}, 500);
        }            
        if (this.id !== 'sq8') {
            $('#sq8').animate({opacity: 0.25}, 500);
        }
        if (this.id !== 'sq9') {
            $('#sq9').animate({opacity: 0.25}, 500);
        }
     }

     if ($(this).css('opacity') == 0.25) {
         $(this).animate({opacity: 0.999}, 200);

        if (this.id !== 'sq1') {
            $('#sq1').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq2') {
            $('#sq2').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq3') {
            $('#sq3').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq4') {
            $('#sq4').animate({opacity: 0.25}, 10);
        }        
        if (this.id !== 'sq5') {
            $('#sq5').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq6') {
            $('#sq6').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq7') {
            $('#sq7').animate({opacity: 0.25}, 10);
        }            
        if (this.id !== 'sq8') {
            $('#sq8').animate({opacity: 0.25}, 10);
        }
        if (this.id !== 'sq9') {
            $('#sq9').animate({opacity: 0.25}, 10);
        }
    }

  }

  );
});

ベクトルなどを使用することで、スクリプトをより良くすることができると思います。誰かがこれをより信頼できるものにするのを手伝ってくれることを願っています、ありがとう。

4

1 に答える 1

1

このようにしてみてください

$('.music9')
    .on('mouseover', function() {
        $(this).stop().animate({ opacity: 0.999 })
               .siblings().stop().animate({ opacity: 0.25 });
    })
    .on('mouseleave', function() {
        $('.music9').stop().animate({ opacity: 0.999 });
    });

デモ

于 2012-11-25T00:35:47.747 に答える