停止动画，然后重新启动它

我不知道，当鼠标滑过它，我怎么可以阻止这个动画停止动画，然后重新启动它

http://jsfiddle.net/xRcwH/14/

来源

2012-08-23 Peli Lipe

这是你需要的效果：http://jsfiddle.net/xRcwH/24/？

来源

2012-08-23 07:21:19 gabitzish

我真的不喜欢它，当人们写没有任何解释的信息时，我们都在这里学习，所以只是解释你做了什么，为什么（并在这里发布一些代码，以防万一小提琴坏了），然后你会得到我的赞赏。 – Christoph

我认为动画并不完全一样 - 选取框文本从屏幕中间开始，向左走完。 OP的选取框在动画中环绕屏幕。 – irrelephant

@Christoph：我不确定我是否有Peli Lipe需要的答案，这就是为什么我的答案是单线问题。如果Q证实我的答案是好的，我可以解释我在那里做了什么。在鼠标移出后， – gabitzish

以下应希望像你工作希望它：

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

来源

2012-08-23 07:50:37 sQVe

有一些速度问题 – Christoph

你也应该在这里发表您的代码，但这里是是什么使得它停止：代替

$(this).find('div').stop();

$this.stop();

因为动画是在选取框内的div上。

来源

2012-08-23 07:55:23 m7o

停止动画，然后重新启动它

回答

相关问题