この単純なjQuery fadeOut（）の使用例の提案

Question

基本的に、買い物カゴの概要にマウスを重ねると、より詳細な情報を含むdivを表示したいと考えています。ここで

は作業JSFiddleです：

http://jsfiddle.net/5JgZp/

Javascriptを

$('#shopping-cart').mouseenter(function() { 
     $('#shopping-cart-preview').fadeIn(); 
    }); 

    $('#shopping-cart').mouseleave(function() { 
     $('#shopping-cart-preview').fadeOut(); 
    }); 

HTML

<div id="user-information"> 
    <div id="shopping-cart"> 
     <img src="@Url.Content("~/Public/images/shoppingcart.png")" alt="shopping cart" /> 
     <p>Products in Shopping Cart: <span class="cart-item-count">2</span> <span class="cart-subtotal">(<span class="cart-subtotal-value">25,54</span>$)</span></p> 

     <div id="shopping-cart-preview"> 
      <p>This is a test.</p> 
      <p>This is a test.</p> 
      <p>This is a test.</p> 
      <p>This is a test.</p> 
      <p>This is a test.</p> 
      <p>This is a test.</p> 
     </div> 
    </div> 

    <div id="action-buttons"> 
     <a class="loginbutton" href="#">LOGIN</a> 
     <a class="registerbutton" href="#">REGISTER</a> 
    </div> 
</div> 

#user-information #shopping-cart { 
    float: left; 
    position: relative; 
    cursor: pointer; 
} 

CSS

#user-information #shopping-cart img { 
    float: left; 
} 

#user-information #shopping-cart p { 
    color: White; 
    display: inline; 
    float: left; 
    font-family: 'Open Sans',sans-serif; 
    font-size: 12px; 
    margin-left: 14px; 
    margin-top: 10px; 
} 

#user-information #shopping-cart p span.cart-subtotal { 
    color: #CFE91A; 
    margin-left: 11px; 
} 

#user-information #shopping-cart #shopping-cart-preview { 
    background-color: White; 
    display: none; 
    left: 0; 
    outline: 1px solid cyan; 
    overflow: hidden; 
    position: absolute; 
    top: 44px; 
    width: 320px; 
} 

#user-information #shopping-cart #shopping-cart-preview p { 
    margin: 0; 
    color: Black; 
} 

#user-information #action-buttons { 
    float: right; 
    margin-right: 12px; 
    margin-top: 3px; 
} 

JSFiddleの例では、私は、カート・サマリーからポップアップするカートのプレビューペインにマウスを動かすと、フェードアウト（）イベントが、その後解雇されたことを除いて、それをしたい正確にどのように動作します即座にfadeIn（）イベントが発生します。だから私たちはそのフェードアウトのフェージンジレンマを取得します。

概要を入力するためにマウスを下に動かすと、ペインが消えないようにしたいと思います。

あなたはどう思いますか？

もう1つ問題は、マウスをすぐに出し入れすると、アニメーションがキューに入れられて実行されているようです。これは、マウスを動かしても、要素が何度もフェードイン/フェードアウトする可能性があることを意味します。提案？

---

EDIT：

だから私はこのような何かをしようとしています。 「プレビューを非表示にした場合は非表示にします」

$('#wrapper').click(function() { 
    if ($(this) != $('#shopping-cart')) { 
     $('#shopping-cart-preview').fadeOut();  
    } 
}); 

ただし、プレビュー内をクリックしても、呼び出されたfadeOut（）が呼び出されます。条件文に何か問題があると確信しています。助言がありますか？

---

EDIT 2：皆さんからのいくつかのアイデアを持つ

図それを。 :)ここで

は、あなたがそれを行う方法は次のとおりです。

$('#shopping-cart').mouseenter(function() { 
    $('#shopping-cart-preview').stop(true, true).fadeIn(); 
}); 

$('#shopping-cart').mouseleave(function() { 
    $('#shopping-cart-preview').delay(2000).fadeOut(); 
}); 

$('#shopping-cart-preview').mouseenter(function() { 
    $(this).stop(true, true).show(); 
}); 

Answer 1

私は、この解決策を考え出したていないit'sが十分であれば必ずそれを試してみてください。偉大な質問といくつかの素晴らしい書かれたコードのためのが、-1ひどいとunformatedフィドルのため

$('#shopping-cart') 
    .mouseenter(function() { 
     $('#shopping-cart-preview').fadeIn(); 
    }) 
    .mouseleave(function() { 
     $('#shopping-cart-preview').delay(500).fadeOut(); 
    }); 

$('#shopping-cart-preview').mouseenter(function() { 
     $(this).stop(true).show(); 
    }) 
    .mouseleave(function() { 
     $(this).delay(500).fadeOut(); 
    }); 

Answer 2

はこれを試してみてください - 私は、ショッピングカートのdivのショッピングカートのプレビューdivの外に移動し、jqueryのコードを簡素化しました - >jsfiddle

Answer 3

私はthecl.comのナビゲーションで同じ問題を抱えていた

私の解決策は、http://cherne.net/brian/resources/jquery.hoverIntent.htmlを使用することでした。

Answer 4

Demo Fiddle

変更はjQueryのコードである。また、

$('#shopping-cart').mouseenter(function() { 
    $('#shopping-cart-preview').stop().fadeIn(); 
}); 
$('#shopping-cart').mouseleave(function() { 
    $('#shopping-cart-preview').fadeOut(); 
}); 

、私は、ショッピングカートのプレビューは、ショッピングカートの要約のdivの下に現れDIV持つ推奨します。これにより、ユーザーがマウスをサマリーdivからプレビューdivに移動するのが遅い場合、プレビューdivを失う問題が解消されます。私は誰もそれが遅いだろうとは思わない。

EDIT：

New Demo Fiddle

ユーザーは現在、プレビューのdivに要約DIVからの移動に時間がかかることがあります。マウスの1秒後までフェードアウトをトリガーしないタイムアウトはありません。あなたは何かに1秒を変更することができます。

新しいコード：

$('#shopping-cart').mouseenter(function() { 
    $('#shopping-cart-preview').stop().fadeIn(); 
}); 
$('#shopping-cart').mouseleave(function() { 
    setTimeout(function(){$('#shopping-cart-preview').fadeOut();},1000); 
});