1

我有一些 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 秒内淡出。有什么建议么？

4

2 回答 2

5

.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);
});
于 2013-08-20T19:40:24.610 回答
3

演示

$(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()方法可防止快速 mouseenter - mouseleave 上的任何动画堆积

于 2013-08-20T19:35:54.577 回答