Jquery 鼠標懸停淡入/淡出（最佳實踐）

Question

我正在使用 Jquery 代碼來淡入/淡出問題下方 div 中的描述性文本。 問題？ 解決方案不是很優雅。 這是我所擁有的：

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

我知道有更好的方法可以做到這一點，我只是不確定它是什么。

Answer 1

您可以使用 hover，第一個 function 將作用於“懸停”，第二個將作用於“懸停”

文檔位於此處： http://docs.jquery.com/Events/hover

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

Answer 2

3條線怎么樣？

<script>

    $(function () {

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

    });


    </script>

夠優雅嗎？

Answer 3

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

Answer 4

喬恩，很好的建議。 我用作一個更完整的解決方案的起點。 僅使用基本的 hover 執行此操作仍然會給我留下一個 hover 調用單個菜單項..很多冗余代碼，所以使用你的建議：我想出了這個：

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

所有菜單項都給出了 topMenu class 和 ID。 對應要顯示的 div 和菜單項的 id 相同，只是前綴為 _ 示例：...。

關於我們的東西！

...

謝謝！