jQuery Animate - 导航答案

【问题标题】：jQuery Animate - navigationjQuery Animate - 导航
【发布时间】：2013-06-10 18:07:51
【问题描述】：

我正在使用 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"
        });
    });
});

【问题讨论】：

标签： jquery navigation jquery-animate

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

也许定义两个函数：

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

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

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

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

回车也一样。

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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

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

【讨论】：