3

私はこのHTMLを持っています：

<div>

    <div id="wrap">
        <div id="pop">Hello</div>
        Here is some content
        <br />
        It is several lines long.
        <br />
        This is the end of it.
    </div>

</div>

そしてこのJavaScript：

$(function() {
    $('#wrap').hover(function() {
        $('#pop', $(this)).show('blind');

    }, function() {
        $('#pop', $(this)).hide('blind');
    });
});

JsFiddleリンク

jQueryUIを使用します。

マウスを#wrapdivの上に移動すると、＃popが下にスライドし、マウスを外すと再びスライドします。ただし、アニメーションが終了する前にマウスを上から#wrapに移動するか、＃wrapから#popに移動すると、永久にループします（アニメーションが終了するまで待つと、＃wrapと#popの間を自由に移動でき、何もアニメーション化されません。私が欲しいものです）。

mouseover、mouseenter/ mouseleave、フィルタリング、 /の各呼び出しの前に.not(':animated')呼び出すことの組み合わせを試しましたが、すべて同じ結果が得られ、基本的な何かが欠けていると思います。.stop()showhide

誰かが私がここで欠けているものの方向に私を向けることができますか？

ありがとう

4

3 に答える 3

4

ホバーコールバックはとではうまく機能しませんがshow('blind')、hide('blind')では問題なく機能するはずですslideUp()/slideDown()。

$(function() {
    $('#wrap').hover(function() {
        console.log('over');
        $('#pop').slideDown();

    }, function() {
        console.log('out');
        $('#pop').slideUp();
    });
});​

また、無限のループは見られませんが、アニメーションはキューに入れられます。マウスポインタを#wrapの内外にすばやく移動すると、アニメーションの長い文字列が生成されます。

編集：

FFで無限ループを取得することができました。

于 2012-06-05T19:27:38.060 に答える
1

の修正を加えたバージョンを投稿するだけですshow('blind')。

$(function() {
    var isAnimating = false;
    $('#wrap').hover(function() {
        if (!isAnimating) {
            isAnimating = true;
            $('#pop').show('blind', function () {
                setTimeout(function () { isAnimating = false; }, 100);
            });
        }
    }, function() {
        $('#pop').hide('blind');
    });
});

デモ

于 2012-06-05T19:43:19.597 に答える
0

これを試して：

$(function() {

    $('#wrap').hover(function() {
        $('#pop', this).stop().show('blind');

    }, function() {
        $('#pop', this).stop().hide('blind');
    });
});

http://jsfiddle.net/lucuma/Md5t5/1/ </ p>

于 2012-06-05T19:07:11.660 に答える