jquery - 使用 Jquery 是否可以在鼠标悬停时缓慢淡入 div，然后在鼠标移开时快速淡出？

Question

我有一些 j-query 脚本，可以在将鼠标悬停在单独的 div 上时切换淡出 div。 div 淡入和淡出的速度相同。我想要实现的是让 div 在鼠标悬停时缓慢淡入，但在鼠标移出时快速淡出。

到目前为止我的脚本如下所示:

// JS code
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $("#nav1").hover(function(){
            $("#splat1").fadeToggle(2000);
        });
    });
</script>

目前，#splat1 div 会在 2 秒内淡入然后再次淡出。我理想的情况是它在 2 秒内淡出，然后在 0.5 秒内淡出。有什么建议吗？

Answer 1

.hover() function可以接受两种功能，一种是淡入，一种是淡出:

$("#nav1").hover(function(){
        $("#splat1").stop().fadeToggle(2000);
    },
    function(){
        $("#splat1").stop().fadeToggle(500);
    });

http://jsfiddle.net/3yfX6/

根据 API，这实际上是 .mouseenter() 和 .mouseleave() 函数调用的简写，您也可以使用它们:

$("#nav1").mouseenter(function(){
    $("#splat1").stop().fadeToggle(2000);
}).mouseleave(
    function(){
    $("#splat1").stop().fadeToggle(500);
});