Question

我是jQuery的新手，我正在尝试用文本创建一个简单的缩略图fadeIn / fadeOut动画。代码很简单但是当我多次快速悬停时，它会停止响应。

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().fadeIn(160);
    }, function() {  
        $(".cover", this).stop().fadeOut(160);
    }); 
})();

Answer 1

如何添加.show()和.hide()？

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().hide().fadeIn(160);
    }, function() {  
        $(".cover", this).stop().show().fadeOut(160);
    }); 
})();

或者您也可以在之前重置不透明度属性：

(function(){
    $('.boxcaption').css({'display': 'none'})
    $('.boxgrid.captionfull').hover(function(){  
         $(".cover", this).stop().css("opacity","1").fadeIn(160);
    }, function() {  
        $(".cover", this).stop().css("opacity","0").fadeOut(160);
    });
})();

Answer 2

问题是你没有使用stop（）的参数;这将是true, true。

jQuery文档很好地解释了这一点。 .stop() documentation

我做了一个小提示来证明这一点。

HoverFiddle

祝你好运！

Answer 3

尝试缓存对象，$（“。cover”，this） - 这意味着当你悬停鼠标时，jquery开始搜索这个元素;这个选择器背后有很多编码;

还尝试从第一个悬停函数中删除.stop（）

(function(){
    //save selectors in variables
    var l1 = $('some_selector'), l2= $('some_selector2');

    $('.boxcaption').css({'display': 'none'})
        l1.hover(function(){  
         $(".cover", this).fadeIn(160);
    }, function() {  
        l2.stop().fadeOut(160);
    }); 
})();

jQuery fadeIn / Out崩溃

3 个答案: