Question

我有这个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 link

使用jQuery UI。

如果您将鼠标移到#wrap div上，则向下滑动时会向下滑动并在鼠标滑出时再次滑开。但是如果你将鼠标从上面移动到#wrap或者在动画结束之前从#wop移动到#pop它会永远循环（如果你等到动画结束，你可以在#wrap和#pop之间自由移动而没有任何动画，是我想要的。）

我尝试了mouseover，mouseenter / mouseleave的组合，按.not(':animated')过滤，在每次调用.stop()之前调用show / hide，所有这些都给出了相同的结果，这让我相信我错过了一些基本的东西。

有人能指出我在这里缺少的方向吗？

由于

Answer 1

悬停回调不适用于show('blind')和hide('blind')，但它们可以与slideUp()/slideDown()一起使用。

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

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

此外，我没有看到无限循环，但动画确实排队等候。如果快速移动鼠标指针进出#wrap，你将生成一长串动画。

编辑：

我能够在FF中获得无限循环。

Answer 2

只需发布我的版本并修复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');
    });
});

DEMO

Answer 3

试试这个：

$(function() {

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

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

http://jsfiddle.net/lucuma/Md5t5/1/

jQuery UI Hover重复

3 个答案:

编辑：