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 链接

使用 jQuery UI。

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

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

有人可以指出我在这里失踪的方向吗？

谢谢

4

3 回答 3

4

悬停回调不能很好地与show('blind')and一起使用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 回答