将hoverintent添加到这个jquery片段中

Add hoverintent to this jquery snippet

本文关键字：jquery 片段 hoverintent 添加      更新时间：2023-09-26

是否有办法添加悬停到这个jquery片段?目前，如果你将鼠标悬停在带有"wall-block-content"类的周围元素上，它们都会淡入/淡出。

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

使用计时器来实现意图: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是对的，使用animate更简洁。

使用animate()方法代替，这样更可靠，您可以像这样改进您的动画:

Update:你可以创建一个带有透明bg的假元素，然后用它来触发目标元素的动画。

$(".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;}
相关文章：