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

Answer 2

DEMO

$(function(){ // DOM READY shorthand

    $("#nav1").hover(function( e ){
         $("#splat1").stop().fadeToggle(e.type=="mouseenter" ? 2000 : 500);
    });

});

.hover()将会收听mouseenter和mouseleave个事件使用简单的Ternary Operator，您可以将切换速度分配给.fadeToggle()

三元（条件）运算符是经典IF语句的简写，其工作方式如下：

booleanStatement ? ifTrue : else ;

可视化：

e.type=="mouseenter" ? TRUE : FALSE(is mouseleave) ;

此外，.stop()方法可防止快速鼠标中的任何动画构建 - mouseleave

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

2 个答案: