3

I am using the jQuery function .animate to highlight navigation links one by one. They are in a ul. I can get this to work, just wondering if there is a way to shorten my code so that I don't have to highlight each item individually. Thanks in advance

$(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

将所有选择器组合到一个语句中，然后附加事件侦听器：

$('#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

也许定义两个函数：

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^=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

尝试使用通用类而不是 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 回答