2011-08-03 11 views
1

現在、私は特定のdivにマウスを置くと、隠れたdivが滑り落ちるという要求を処理する、場所はhttp://jsfiddle.net/gaby/zzj7E/5/のJQueryスクリプトを持っています。これは私の上に置かれるすべての部門で発生します。JQuery Slideup/Slidedown前のdivアニメーション後または遅れた後のdiv

しかし、divのセットにマウスをすばやく乗せれば、複数のdivが一度に滑り落ちることに気付くでしょう。実際には私はこれを望んでいない。

私が欲しいのは、前のdivが完全にスライドしていない限り、他のdivは上に乗ってもスライドしません。または、可能であれば、ユーザーがマウスを1.5秒以上マウスの上に置いた場合にのみ、divスライドの効果を表示します。

これはjQueryで実装できますか?助けてもらえますか?

EDIT: .live()を使用して動的に追加された要素に効果を追加する必要がありました。 live()を使ってホバーを使うのは面倒です。以下はコードを使用しています

$(".altbgcolor").live('mouseenter', function() { 
       //hover code 
       $(this) 
        .addClass('altbgcolor-active') 
        .find(".sharedp") 
        .slideDown('slow'); 
      }).live('mouseleave', function() { 
       //stopped hovering code 
       $(this) 
        .removeClass('altbgcolor-active') 
        .find(".sharedp") 
        .slideUp('slow'); 
      }); 

このmouseenterとmouseleaveイベントで効果をどのように統合するのですか?

+0

すべてが可能であることを確認してください。しかし、あなたがしたいことはあまり明確ではありません。 – meo

答えて

2

何かが働くだろう:

http://jsfiddle.net/zzj7E/27/

$(".altbgcolor").hover(function() { 
    var el= $(this); 
    el.addClass('altbgcolor-active'); 
    el.data('hover', setTimeout(function() 
     { 
      if (el.hasClass('altbgcolor-active')) 
      { 
       el.find(".sharedp").slideDown('normal'); 
      } 
     }, 1500) 
    ); 

},function() { 
    var el= $(this); 
    clearTimeout(el.data('hover')); 
    el.removeClass('altbgcolor-active') 
     .find(".sharedp") 
     .slideUp('normal'); 
}); 

EDIT:mouseoverイベントとmouseoutイベントを使用している場合ホバーのTEAD:

http://jsfiddle.net/zzj7E/30/

$(".altbgcolor").live({ 
    mouseenter: function() { 
     var el= $(this); 
     el.addClass('altbgcolor-active'); 
     el.data('hover', setTimeout(function() 
      { 
       if (el.hasClass('altbgcolor-active')) 
       { 
        el.find(".sharedp").slideDown('normal'); 
       } 
      }, 1500) 
     );  
    }, 
    mouseleave: function() { 
     var el= $(this); 
     clearTimeout(el.data('hover')); 
     el.removeClass('altbgcolor-active') 
      .find(".sharedp") 
      .slideUp('normal'); 
    } 
}); 
+0

あなたはどこかでタイムアウトをクリアする必要がありますが、同じ問題がありますが、1.5秒遅れました。 – meo

+0

@meo - うん、そうです。一定。 – RoccoC5

+0

+1かなりスマートにデータのtimeOutを設定する。 – meo

0

私はあなたが欲しいものを100%確実ではないが、私はあなたの更新の例がありますが.stop()

を探していると思う。このような http://jsfiddle.net/zzj7E/18/

関連する問題