Jquery鼠标悬停淡入淡出效果（最佳实践）

Question

我有一段工作中的Jquery代码，用于在问题下方的一个div中淡入/淡出描述性文本。问题是，解决方案不是很优雅。这就是我拥有的代码：

$("#home").mouseover(function() {
    $("#homeText").fadeIn("slow");
});
$("#homeText").mouseout(function() {
    $("#homeText").fadeOut();
});

我知道有更好的方法来解决这个问题，只是不确定具体是什么方法。

- David Hamilton

---

也许你可以描述一下这段代码令你感到困扰的地方。为什么你认为它不够优雅？ - Geoff

Answer 1

你可以使用hover，第一个函数将在“悬停时”执行，第二个函数将在“悬停离开时”执行

文档在这里：http://docs.jquery.com/Events/hover

$("#home").hover(function(){
    $("#homeText").fadeIn("slow");
},
function(){
    $("#homeText").fadeOut();
});

- Jon Erickson

---

太棒了！我在你的解决方案基础上进行了改进，使其能够处理任意数量的元素而不需要冗余代码：$('.topMenu').hover(function() { $('#'+this.id).fadeIn("slow"); }, function () { $('#'+this.id).fadeOut();
}); }); - David Hamilton

Answer 2

三行如何？

<script>

    $(function () {

        $('#home').hover(function() {
           $('#homeText').fadeToggle("slow");
        });

    });


    </script>

足够优雅了吗？

- fseminario

Answer 3

Jon，非常好的建议！我将其用作更完整解决方案的起点。仅使用基本的hover会使我仍然需要为单个菜单项调用hover，这会导致很多冗余代码。因此，根据您的建议，我得出了以下结论：

$('.topMenu').hover(function()
        {
        $('#_'+this.id).fadeIn("slow");
        },
        function ()
            {
        $('#_'+this.id).fadeOut();      
            });
});

所有菜单项都被赋予了topMenu类和ID。相应的显示div与菜单项具有相同的id，只是前缀为_。 例如：

....

...

谢谢！

- David Hamilton

---

一定要根据自己的需求进行定制。很高兴能够帮助到您 =) - Jon Erickson

Answer 4

$(function () {
    $('#home').hover(function() {
       $('#homeText').fadeIn("slow");
    });
    $('#home').mouseout(function() {
       $('#homeText').fadeOut("slow");
    });
});

- Luz