1

以下は私が持っているHTMLとJQueryコードです:

私が持っているHTML：

<div class="announcement">
    <img id="imgBanner" style="cursor: pointer;" onmouseover="showPopup();" />
</div>
<div id="divArrow" class="arrow">
    <img id="imgExpandContract" style="cursor: pointer;" alt="Arrow" border="0"onmouseover="showPopup();" />
</div>
<div id="window">
    <!-- some html content acting as a fly-out -->
</div>

JS コード:

var imgBanner = "xyx.png";
var imgArrowExpand = "xyx.png";
var imgArrowContract = "xyx.png";
var isDone = false;

function showPopup() {
    try {
        var imgWidth = $("#imgExpandContract").width();
        var posX = document.getElementById("imgExpandContract").offsetLeft + imgWidth;
        if (!$("#window").is(":animated")) {
            $("#window").animate({ left: posX }, 800, 'easeOutSine',
                                function() {
                                    isDone = true;
                                    $("#imgExpandContract").attr("src", imgArrowContract);
                                    $("#window").bind("mouseenter", function() { $("#window").bind("mouseleave", function() { closePopup(); }); });
                                }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

function closePopup() {
    try {
        if (isDone) {
            var posY = $("#window").width();
            $("#window").animate({ left: -posY }, 600, 'linear',
                            function() {
                                isDone = false;
                                $("#imgExpandContract").attr("src", imgArrowExpand);
                                $("#window").unbind("mouseenter");
                                $("#window").unbind("mouseleave");
                            }
            );
        }
    }
    catch (error) {
        //disable the banner, arrow images
        document.getElementById("imgBanner").style.visibility = 'hidden';
        document.getElementById("imgExpandContract").style.visibility = 'hidden';
    }
}

私は現在2つの問題を抱えています:

  1. #window div からマウスを離すと、mouseleave が呼び出される前にわずかな遅延が発生します。どうすればこれをなくすことができますか? マウスリーブを引き起こす前に、数ミリ秒ほど留まります。

  2. mouseleave イベントが発生しないことがあります... ときどき発生しますが、発生します。マウスを #window div に移動して戻る必要があります (基本的に 2 回行う必要があります)。なぜこれが起こるのか、どうすれば対処できるのか誰か教えてもらえますか?

JQueryでanimate()を使用する以外に、これを行うためのより良い解決策はありますか? すべて/任意の提案を喜んでいたします。div 内のコンテンツで fly-out/slideIn 効果を実行しようとしています。

ご助力ありがとうございます

4

1 に答える 1

3

これがあなたの述べた問題を解決するかどうかはわかりませんが、コード全体に役立つことがたくさんあります。たとえば、私の第一印象は次のとおりです。

「わかりました、彼はjqueryを使用しています...待ってください、彼はjqueryを使用していると思いました...WTF?」.

  1. getElementByIdを使用する理由 使用して$('#myid')ください。
  2. style.visibilityを使用する理由 使用する$(selector).css('visibility', value);
  3. イベントをバインドするために要素属性を使用しないでください... jqueryを使用してください$(selector).hover(openPopup, closePopup);

マウスリーブが発火に失敗したとき、あなたはマウスがエリアを離れたのですか？つまり、div のサイズが思ったよりも少し大きいということですか? そうでない場合は、単に関数の実行に時間がかかるか、アニメーション化が完了していない可能性があります (つまりisDone = false)。私の意見では、何かがアニメーション化されているかどうかを検出しようとするのではなく$(element).stop(true);、エンドポイントでアニメーションを停止するように呼び出してから、他のアニメーションを続行します。それはかなりフェイルセーフになるはずです。また、引数を完全に指定して呼び出すか省略すると、正確にその場所で停止すると信じていますfalse...位置を計算することなく、現在の場所からアウトアニメーションをアクティブにできます。

さらに、これが実際にどのように見えるかはわかりませんが、使用する必要さえないかもしれません。animate組み込みのエフェクトのいずれかを使用できるslideか、または何かを使用することもできます。それらも調べたいと思うかもしれません。

于 2010-02-12T21:16:57.173 に答える