0

私はこれをローカルでテストしています：http：//jsfiddle.net/fYkMk/1/ これは、マウスオーバー（booking-mask）で開き、マウスが離れると閉じる予約フォームです。4つのフィールドがあります：

  • デートピッカー
  • 客数
  • 部屋数
  • 夜の数

最後の3つのフィールドは、相対アイコンをクリックすると開くスライドメニューです。

これらのスライドアニメーションは、操作/終了アニメーションがまだ終了する前に、ユーザーが予約マスクdivで「マウスオーバー」、「マウスリーブ」、「マウスオーバー」を再度決定するまで機能します。

そのため、リストが壊れていて、そのうちの一部しか見ることができません。[下の画像を参照]

ここに画像の説明を入力してください

あなたがこれで私を助けることができることを願っています。ありがとう

ルカ

4

2 に答える 2

0

jQuery animate は可視性を非表示に設定するため、問題があると思われる場所はすべてリセットする必要があります。たとえば、次のとおりです。

 $('.booking-mask').mouseenter(function(){
                mouseOverBooking = true;
                $(this).css('overflow', 'visible');
                openBookingMask();
                });

置くだけ

$(this).css('overflow', 'visible');

適切な場所で、よりスムーズに作業できます。

更新されたフィドル

于 2011-10-09T18:29:19.830 に答える
0

あなたの例ではこれらの 3 つのボタンを実際には見ることができませんが.stop(true, true)、コードに実装してみてください。アニメーションが衝突する場合は、別のアニメーション キューを設定してみてください。デフォルトの jQuery は「fx」であると思います。.queue() および .dequeue() 関数もあり、jQuery サイトにアクセスしてドキュメントを読むか、私よりも賢い人がそれを理解するかどうかを確認してください。

私がこれを正しく理解していれば、ドロップダウン メニューはメイン サイト/背景の 1 点の後ろに消えます。これは、実際には css の問題のように見えます。

.choose-list li{overflow: visible; z-index: 9999;}

.choose-list li:hover{
    background:#8B753B;
    color:white;
    overflow: visible;
}

これで直りますか？

編集：FFでラップトップとウィンドウを使用すると、あなたの話していることがわかります;-)

問題は、.booking-mask がオーバーフローして隠されているように思えます。jQuery Toggle または css で行った何かである可能性がありますが、フィドルで重要な修正を追加すると、次のようになります。

.booking-mask{
    background: red;
    height: 58px;
    margin: 44px 0 0;
    position: fixed;
    right:0;
    top: 0;
    z-index: 3;
    overflow:visible!important;
    /*padding:0;*/
    color:white;
}
于 2011-10-09T14:11:38.587 に答える