0

このjqueryスニペットにホバーインターを追加する方法はありますか？現在、「wall-block-content」クラスで周囲の要素にカーソルを合わせると、すべてフェードイン/フェードアウトします。

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

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

2 に答える 2

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 を使用する方がクリーンです。

于 2013-01-22T19:50:16.047 に答える
0

代わりに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;}
于 2013-01-22T19:39:26.277 に答える