3

jQuery 関数 .animate を使用して、ナビゲーション リンクを 1 つずつ強調表示しています。彼らはULにいます。各アイテムを個別に強調表示する必要がないようにコードを短くする方法があるかどうか疑問に思っているだけですが、これを機能させることができます。前もって感謝します

$(document).ready(function(){
    $('#button1').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button1').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button2').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button2').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button3').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button3').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
    $('#button4').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
    $('#button4').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });
});
4

4 に答える 4

3

すべてのセレクターを 1 つのステートメントに結合してから、イベント リスナーをアタッチします。

$('#button1, #button2, #button3, #button4').mouseenter(function(){
    $(this).animate({
        color:"#FFFFFF",
        backgroundColor: "#FF9B05"
    });
}).mouseleave(function(){
    $(this).animate({
        color:"#FF9B05",
        backgroundColor: "#FFFFFF"
    });
});
于 2013-06-10T18:13:06.300 に答える
0 
$('[id^=button]').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
$('[id^=button]').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });

この「^」は、「button」で始まる要素 ID を検索します。

于 2013-06-10T18:13:20.697 に答える
0

多分2つの関数を定義します:

function animateLeave() {
     $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
}

 function animateEnter() {
     $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
}

次のクラスを適切なボタンに割り当てて (つまり、button1を持つclass="leaveAnimation")、実行します。

$('.leaveAnimation').mouseleave(animateLeave);

入るのも同じ。

于 2013-06-10T18:12:34.613 に答える
0

ID ではなく、共通のクラスでボタンを識別するようにしてください。

たとえば、クラス「ボタン」を割り当てると、JavaScript コードは次のようになります。

$(document).ready(function(){
$(".buttons").mouseenter(function(){
    $(this).animate({
        color:"#FFFFFF",
        backgroundColor: "#FF9B05"
    });
});
$(".buttons").mouseleave(function(){
    $(this).animate({
        color:"#FF9B05",
        backgroundColor: "#FFFFFF"
    });
});
于 2013-06-10T18:17:13.293 に答える