停止動畫，然後重新啓動它

我不知道，當鼠標滑過它，我怎麼可以阻止這個動畫停止動畫，然後重新啓動它

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

停止動畫，然後重新啓動它

回答

相關問題