是否有可能在鼠标悬停时缓慢淡入div,但是在鼠标输出时使用Jquery快速淡出？

Question

我有一些j-query脚本,切换在悬停在单独的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()函数可以接受两个函数,一个用于在淡入淡出,一个用于淡出:

$("#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);
});