Question

我有一个div，当它悬停时，slideToggles <p>标记变为可见，然后我激活setInterval来设置可见<p>标记的动画，当用户不再在div上盘旋时<p>标签会像它应该隐藏，但动画仍会继续运行。当用户不再徘徊时，我已经尝试了所有我能想到的停止动画，但我是jQuery的新手并且我没有成功。

这是向你展示我所拥有的东西的小提琴，http://jsfiddle.net/Yokocapolo/g7AyV/

我希望<p>标记在不再悬停时重新开始，并且当用户将鼠标悬停在div上时动画再次启动。

感谢您的帮助。

Answer 1

在脚本末尾添加此事件：

$('#portRibbon').mouseout(function(){
    $('#text3').animate({duration:0});
});

选中此示例：http://jsfiddle.net/saidbakr/g7AyV/1/

来自Jquery Api：

附加说明：

所有jQuery效果，包括.animate（），都可以   通过设置jQuery.fx.off = true全局关闭，这是有效的   将持续时间设置为0.有关更多信息，请参阅jQuery.fx.off。

Answer 2

您是否使用间隔设置为零来运行动画？

动画会每秒运行数千次搞砸你的浏览器，根本不需要间隔功能，但它应该更像是这样：

var timer;

$('#portRibbon').on({
    mouseenter: function() {
        $('#text3').stop(true,true).css('top', '0px');
        $('#portDescription').slideDown(500, function() {
            $('#text3').animate({
                'top': '-35px'
            }, 6000).delay(1000).animate({
                'top': '0px'
            });
        });
    },
    mouseleave: function() {
        $('#portDescription').slideUp(500);
    }
});

FIDDLE

Answer 3

我设法通过在悬停时添加span然后在mouseleave上删除它来使其工作。

我将span和文本节点存储为变量，然后使用append()将其附加到p标记。当用户离开后，我使用remove()删除mouseleave上的变量。

要查看它的工作情况，请点击小提琴。 http://jsfiddle.net/Yokocapolo/g7AyV/7/

再次感谢那些回答我问题的人。

slideToggle上的jQuery clearInterval

3 个答案: