javascript - 将 hoverintent 添加到这个 jquery 片段

Question

有没有办法将 hoverinter 添加到这个 jquery 片段中？目前，如果您将鼠标悬停在具有“wall-block-content”类的周围元素上，它们都会淡入/淡出。

$(".wall-block-content").fadeTo("fast", 0);

$(".wall-block-content").hover(function(){
$(this).fadeTo("fast", 1);
},function(){
$(this).fadeTo("fast", 0);
});

Answer 1

使用计时器来实现意图：http: //jsfiddle.net/bxqTr/

$(".wall-block-content").hover(function(){
    var $this = $(this),
        timer = $this.data("timer");

    if(timer) window.clearTimeout(timer);
    timer = window.setTimeout(function () {
        $this.stop().animate({'opacity':'0'},100);
    }, 1000);
    $this.data("timer", timer);
},function(){
    var $this = $(this),
        timer = $this.data("timer");

    if(timer) window.clearTimeout(timer);
     $this.stop().animate({'opacity':'1'},100);
});

在此示例中，用户必须将鼠标悬停在元素上至少 1 秒（1000 毫秒）才能显示意图。不过，Barlas 是对的，使用动画更干净。

Answer 2

改用animate()方法，更可靠，你可以像这样改进你的动画：

更新：您可以创建一个具有透明背景的假元素，然后使用它来触发目标元素的动画。这是 jsFiddle 示例。

$(".hidden").hover(function(){
    $('.target').stop().animate({'opacity':'1','margin-top':'0px'},100);
},function(){
    $('.target').stop().animate({'opacity':'0','margin-top':'20px'},100);
});

<div id="wrapper">
    <div class="target posi"></div>
    <div class="hidden posi"></div>
</div>

#wrapper { position:relative; left:0; top:0; } 
    .posi { position:absolute; left:100px; top:100px; width:200px; height:200px;}
        .hidden { background:transparent; cursor:pointer; }
        .target {background:red; opacity:0;}