2012-01-04 3 views
0

jqueryに問題があります。私は "show_your_stuff"とdivblockを持っています。別のdivブロック上にマウスを置くと、私は何をしたいのですか?マウスをもう一度やり直すと、分割ブロックが消えていきます。私は60秒後にdivblockが消えることを望んでいます。誰かが私を助けることができますか?時間のあるJQueryのホバー

これは私のコードです:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $("a#controlbtn").hover(function(e) { 
      e.preventDefault(); 
      var slidepx=$("div#linkblock").width() + 10; 
      if (!$("div#maincontent").is(':animated')) { 
       if (parseInt($("div#maincontent").css('marginRight'), 10) < slidepx) { 

        $(this).addClass('close').html('Show your stuffs'); 
        margin = "+=" + slidepx; 

        } else { 
        $(this).removeClass('close').html('Hide your stuffs'); 
        margin = "-=" + slidepx; 
       } 
       $("div#maincontent").animate({ 
        marginRight: margin 
       }, { 
        duration: 'slow', 
        easing: 'easeOutQuint' 
       }); 
      } 
     }); 

    }); 
</script> 

答えて

2

あなたはときにマウスの葉を隠す効果を延期し、キャンセルするsetTimeoutclearTimeoutを使用し、それぞれに再び入ることができます。

$(element).mouseover(function() { 
    if (typeof delayTime != 'undefined') 
     window.clearTimeout(delayTime); 
    $('#tooltip').animate({/*CSS to show element*/},{duration: XXX, queue: false}); 
}); 
$(element).mouseout(function() { 
    delayTime = window.setTimeout(function(){ 
     $('#tooltip').animate({/*CSS to hide element*/},{duration: XXX, queue: false}); 
    }, XXX); 
}); 

を...どこ各XXXミリ秒単位の遅れや滲みを表す数値です。

+0

ありがとう! #tooltipはこれが私のdiv-nameですか?申し訳ありませんが、動作していません。 – craphunter

+0

'#tooltip'は、mouseover/mouseoutで表示/非表示しようとしている要素のダミー' id'値です。これを 'class'や' id'や、コード内で実際に対象とする要素を効果的に返すセレクタに置き換える必要があります。 – Aaron

+0

私または/およびCSS用のHTMLコードを投稿することはできますか?しかし、私はhtmlコードが良いと思います。私は本当に私が間違っていることを知りません! – craphunter

0

アーロンがリンクを掲載。これは、あなたが、その価値は、チェックアウトを助けるかどうかわからないんだけど!それは働いている:

http://jsfiddle.net/5M9as/

Craphunter

0

私はこのようなタスクのためにもHoverIntent使用しています。それは、感度やタイムアウトなどの機能を備えています。感度とは、「アウト」イベントを発生させる前に、ホバーアイテムからXピクセルの距離を離し、アウトイベントを発生させる前に、ホバーアイテム外の時間をタイムアウトすることを意味します。