1

我有一个 div，当悬停在上面时，slideToggles 一个<p>标签变得可见，然后我激活一个 setInterval 来为可见<p>标签设置动画，当用户不再将鼠标悬停在 div 上时，<p>标签会像它应该的那样隐藏，但动画仍然继续运行. 当你的用户不再悬停时，我已经尝试了我能想到的一切来停止动画，但我是 jQuery 新手，但我没有成功。

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

我希望<p>标签在不再悬停时返回开始，并在用户将鼠标悬停在 div 上时重新开始动画。

感谢您的任何帮助。

4

3 回答 3

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。

于 2012-11-26T22:20:23.900 回答
0

您正在使用设置为零的间隔来运行动画？

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

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);
    }
});

​<a href="http://jsfiddle.net/g7AyV/2/" rel="nofollow"> FIDDLE

于 2012-11-26T22:11:33.690 回答
0

我设法通过添加spanon hover 然后将其删除来让它工作mouseleave。

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

要查看它的工作原理，请单击小提琴。http://jsfiddle.net/Yokocapolo/g7AyV/7/

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

于 2012-11-28T23:25:27.707 回答