3

注: 問題のスクリプトは私が書いたのではなく、同僚が書きました。私たちのために、これに関する意見を得るためにボランティアをしています。初心者のように聞こえる誤った用語や説明をご容赦ください。私はスクリプトの専門家ではなく、HTML/CSS の専門家です。

問題のページ:

http://cure.org/curekids/kenya/2010/02/joseph_muchiri/

問題のスクリーンショット:

ckダッシュタブ.jpg

問題：

このページを見ると、ページの上部にダッシュのようなツールバーが表示されますが、サイト ヘッダーのすぐ下にあります (「CUREkids」と書かれた部分)。

そのツールバーの任意の領域にカーソルを合わせると、左側に小さな緑色のタブがあり、その後ろからアニメーションで表示されます (クエスチョン マークが付いた部分)。クリックすると、タブが切り替わり、説明的なSlidedeckインターフェイスが開きます。これまでのところ、すべて順調です。

問題は、ツールバー上でマウスを動かす速度が速すぎると、奇妙な不具合が発生して jQuery ルールが奇妙な方法で起動し、タブが後ろから出てきて、ツールバーの上に戻ってしまうことです。

追加の詳細：

スクリプトが機能する方法は、タブがデフォルトでツールバーの後ろに隠されていることです.jQueryは最初にタブを左にアニメーション化してツールバーから出てきます.次にz-indexを変更して実際にツールバー要素の上に持ってきて最大化します.タブの使いやすさとクリック領域。これはすべて mouseOver で行われます。mouseOut では、逆のことが起こります (z-index がツールバーよりも低い値に変更された後、元の位置にアニメーションで戻ります)。

私の考え

mouseOver イベントが非常に迅速に発生したときにオーバーラップ バグが発生しないように、スクリプトの記述方法に問題があるに違いないと思います。

すべての助けに感謝します。

4

4 に答える 4

2

mouseleave に定義した関数で.stop(true, true)、z-index を -1 に戻す前に追加します。

$("#what-tag").stop(true, true).css("z-index", "-1");

http://api.jquery.com/stop/をチェックしてください

に最初trueに渡されたもの.stop(true, true)は、キューに入れられたすべてのアニメーションを削除します。2 番目trueがこの状況の鍵です。これは基本的に、mouseenter に対して定義した関数の最後にジャンプし、そのコールバックをすぐに起動します。この場合、 を使用し.stop(true, true)て、z-index が -1 に設定される前に常に 1 に設定されるようにします。

現在起こっていることは、mouseenter コールバック関数が起動する前にz-index を -1 に設定していることだと思います。

編集：

無関係 - jqueryセレクターを変数にキャッシュすることも検討する必要があります。$("#what-tag")この hover メソッドで 6 回呼び出しています。次のようにホバー メソッドの上に変数を定義し、ホバーvar $whatTag = $("#what-tag")メソッド内の参照を置き換えると、より高速に動作します。

于 2010-10-19T02:47:37.117 に答える
1

これを修正し、さまざまなオプション（ミリ秒単位の間隔、タイムアウト、感度など）で動作を制御するために私が知っている最良の方法は、jQueryプラグイン、hoverIntentです。

デフォルトの使用法だけで、マウスのトリガー/キューイングアニメーションの素早い動きが修正されます。

.. onMouseOver 関数をすぐに呼び出す代わりに、ユーザーのマウスが十分に遅くなるまで待ってから呼び出しを行います。

なんで？アニメーションまたは ajax 呼び出しの偶発的な起動を遅延または防止するため。小さな領域では単純なタイムアウトが機能しますが、ターゲット領域が大きい場合、意図に関係なく実行される可能性があります。

キューイングを停止するだけの場合は、次の記事/投稿をご覧ください。

http://www.learningjquery.com/2009/01/quick-tip-prevent-animation-queue-buildup

http://css-tricks.com/full-jquery-animations/

于 2010-10-18T22:07:09.887 に答える
0

何が起こっているのかというと、mouseoverで開始されたjquery animate関数は、mouseoutイベントが発生したときに終了しません...したがって、アニメーションの「show」部分でz-indexの変更が発生するまでの100msの遅延が終了しますマウスアウトの「非表示」機能でz-indexが変更された後に発生します。（それが理にかなっていることを願っています...）

だからこれを試してください...変更：

$("#curekids-dash").hover(function() {
        $("#what-tag").show();
        $("#what-tag").animate({left: "-13"}, 100, "linear", function() {$("#what-tag").css("z-index", "1");}); 
    }, function() {
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate({left: "10"}, 100, "linear", function() {$("#what-tag").hide();});
    }
);

に：

$("#curekids-dash").hover(function() {
        $("#what-tag").show();
        $("#what-tag").animate({left: "-13"}, 100, "linear", function() {$("#what-tag").css("z-index", "1");}); 
    }, function() {
        $("#what-tag").clearQueue();
        $("#what-tag").css("z-index", "-1");
        $("#what-tag").animate({left: "10"}, 100, "linear", function() {$("#what-tag").hide();});
    }
);

重要なのは$("#what-tag").clearQueue();

于 2010-10-15T10:02:37.777 に答える
0

マークアップで、アンカー要素#what-tagを div-element の外側に移動します。#curekids-dashたとえば、その直前に移動します。

                :
                :
<a class="toggle-trigger" id="what-tag" href="#">?</a>
<div id="curekids-dash">
    <a id="curekids-home-link" href="/curekids">CUREkids<span class="hover-icon">(return to CUREkids home)</span></a>

    <h1 id="helpChildNow"><a class="curekids-donate-link" href="https://secure.cure.org/curekids/donate?cause_id=5">Help <span id="childName">Joseph</span> Now</a></h1>
                :
                :

curkids.css の 24 行目で、 selector#curekids-dashに対して property を追加し、z-index: 2;ルール全体を次のようにします。

#curekids-dash {
  background:url("/img/curekids/ck-toggle-container.png") no-repeat scroll center center transparent;
  height:80px;
  position:relative;
  width:960px;
  z-index:2;
}

これにより、FF 3.6 で問題が修正されました。IE、Webkit、および以前の FF バージョンでも修正されない場合は驚くでしょう。

于 2010-10-17T16:59:55.913 に答える