停止动画，然后重新启动它
停止动画，然后重新启动它
提问于 2012-08-23 15:13:48
我不知道如何在鼠标悬停时停止此动画。
http://jsfiddle.net/xRcwH/14/
回答 3
Stack Overflow用户
发布于 2012-08-23 15:21:19
这就是你需要的效果吗：http://jsfiddle.net/xRcwH/24/？
Stack Overflow用户
发布于 2012-08-23 15:50:38
下面的代码应该能像你想要的那样工作：
var $marquee;
var reset = function() {
"use strict";
$marquee.css("margin-left", "0%");
$marquee.animate({ "margin-left": "-100%" }, 4000, 'linear', reset);
};
var func = function() {
"use strict";
$marquee = $("#marquee");
$marquee.css({"overflow": "hidden", "width": "100%"});
$marquee.wrapInner("<span>");
$marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "right" });
$marquee.append($marquee.find("span").clone());
$marquee.wrapInner("<div>");
$marquee.find("div").css("width", "200%");
reset.call($marquee.find("div"));
};
$(function() {
"use strict";
func();
$marquee.hover(
function() {
$(this).stop();
},
function() {
$(this).animate({ "margin-left": "-100%" }, 4000, 'linear', reset);
}
);
});请在此处查看更新的小提琴：http://jsfiddle.net/xRcwH/27/
我已经清理了你的代码，并移动了一些东西。reset函数不应该在函数func中声明为，所以我将其移出。
此外，我还改变了：
marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align":"center" }); 至
$marquee.find("span").css({ "width": "50%", "display": "inline-block", "text-align": "right" });因为这使得它在整个屏幕上都是动画的。
最后，我使用.hover()，因为它就是为这个而生的，.hover()和做以下事情是一样的：
$(selector).mouseenter(handlerIn).mouseleave(handlerOut);
Stack Overflow用户
发布于 2012-08-23 15:55:23
你也应该在这里发布你的代码，但下面是让它停止的原因：
$(this).find('div').stop();而不是
$this.stop();因为动画位于选框内的div上。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12086523
复制相关文章
相似问题
腾讯云开发者
