jQuery Animate - 导航

Question

我正在使用jQuery函数.animate逐个突出显示导航链接。他们是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"
        });
    });
});

Answer 1

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

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

Answer 2

可能定义两个函数：

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

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

将以下类分配给相应的按钮（即button1将class="leaveAnimation"），然后执行：

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

输入相同。

Answer 3

$('[id^=button]').mouseenter(function(){
        $(this).animate({
            color:"#FFFFFF",
            backgroundColor: "#FF9B05"
        });
    });
$('[id^=button]').mouseleave(function(){
        $(this).animate({
            color:"#FF9B05",
            backgroundColor: "#FFFFFF"
        });
    });

这个“^”将搜索以“button”开头的元素id

Answer 4

尝试使用公共类而不是id识别您的按钮。

例如通过分配类“按钮”，javascript代码将是：

$(document).ready(function(){
$(".buttons").mouseenter(function(){
    $(this).animate({
        color:"#FFFFFF",
        backgroundColor: "#FF9B05"
    });
});
$(".buttons").mouseleave(function(){
    $(this).animate({
        color:"#FF9B05",
        backgroundColor: "#FFFFFF"
    });
});