2

これが私のjqueryコード全体です：

$(function(){
    $(".sc").hover(function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'28px'},200);
        $(".sc span.L3").animate({marginRight:'5px'},300);
        $(".sc span.L4").animate({marginRight:'19px'},400);
    }, function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'0px'},200);
        $(".sc span.L3").animate({marginRight:'0px'},300);
        $(".sc span.L4").animate({marginRight:'0px'},400);
    });
    $(".sc").click(function(){
        if ($(".sc div#trigger").hasClass('passive')){
                $(".sc div#trigger").removeClass('passive');
                $(".sc div#trigger").addClass('active');
            }
            else { 
                $(".sc div#trigger").addClass('passive');
                $(".sc div#trigger").removeClass('active');
            };

    });

div＃trigger.hasClass（'passive'）の場合、ホバー効果を停止したい。つまり、div＃triggerのクラスが「パッシブ」の場合はホバー効果を無効にし、クラスが「アクティブ」の場合は有効にします。

このコードをどのように使用できますか？！

if ($(".sc div#trigger").hasClass('passive')) {
// codes to stop hover effect
}
4

4 に答える 4

2 
$(function(){
    $(".sc .active").hover(function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'28px'},200);
        $(".sc span.L3").animate({marginRight:'5px'},300);
        $(".sc span.L4").animate({marginRight:'19px'},400);
    }, function(){
        $(".sc span.L1").animate({marginRight:'0px'},100);
        $(".sc span.L2").animate({marginRight:'0px'},200);
        $(".sc span.L3").animate({marginRight:'0px'},300);
        $(".sc span.L4").animate({marginRight:'0px'},400);
    });
    $(".sc").click(function(){
        if ($(".sc div#trigger").hasClass('passive')){
                $(".sc div#trigger").removeClass('passive');
                $(".sc div#trigger").addClass('active');
            }
            else { 
                $(".sc div#trigger").addClass('passive');
                $(".sc div#trigger").removeClass('active');
            };

    });
于 2012-08-30T08:37:02.540 に答える
1

セレクター'.sc div#trigger'は不必要に冗長です。ID は一意であるため、単純に次を使用します。'#trigger'

$(function(){
    $('.sc').hover(function(){
        if ( $("#trigger").hasClass('active') ) {
            $(".sc span.L1").animate({marginRight:'0px'},100);
            $(".sc span.L2").animate({marginRight:'28px'},200);
            $(".sc span.L3").animate({marginRight:'5px'},300);
            $(".sc span.L4").animate({marginRight:'19px'},400);
        }
    }, function(){
        if ( $("#trigger").hasClass('active') ) {
            $(".sc span.L1").animate({marginRight:'0px'},100);
            $(".sc span.L2").animate({marginRight:'0px'},200);
            $(".sc span.L3").animate({marginRight:'0px'},300);
            $(".sc span.L4").animate({marginRight:'0px'},400);
        }
    });
    // ...
});
​

また、クリックイベントに関しては、ここでも冗長性を減らすことができます。jQuery ライブラリのあまり知られていない/使用されている関数は.toggleClass()、クラスが存在するかどうかに応じて、クラスを追加/削除できます。これは、単一の文字列で名前を指定することにより、複数のクラスで同時にこの効果をトリガーできるという事実により、さらに強力になります。

$(".sc").click( function() {
    $("#trigger").toggleClass('passive active');
});

ここでの要素は一度に 1 つの状態しか持てないため、現在その要素に関連付けられている状態を単にオフにし、もう一方をオンにします。

于 2012-08-30T08:35:03.213 に答える
0

div#trigger の div を失います。ID は DOM ツリー内のオブジェクトを一意に表すため、必要ありません。要素のクラスを変更する場合は、2 つの方法で行うことができます...自分の方法または単に

$(".sc #trigger").toggleClass("active");
$(".sc #trigger").toggleClass("pasive");

もちろん、最初から初期化する必要があります

今あなたの質問に答えるために、ただ使用してください.stop()-それと同じくらい簡単です

于 2012-08-30T08:44:04.907 に答える
0

それがあなたが探しているものでありますように：

if ($('.sc div#trigger').hasClass('passive')) {
  $('.sc span').stop(true, true);
}
于 2012-08-30T08:34:59.933 に答える