[英]jQuery animate() change text
我現在就開始介紹jQuery animate（）的第一步。 我正在嘗試使演示類型成為一種練習，但是似乎無法使用animate（）函數在動畫中間更改div的文本。
這是我當前的代碼：
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script>
<script>
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
//can I change the text with animation???
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
</script>
</head>
<body>
<button>Start Animation</button>
<div id='text' style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div>
</body>
</html>
有沒有一種實用的方法可以在不透明度關閉時更改文本，所以當動畫返回時，文本是否被更改？
您可以使用隊列功能使更改排隊。
$(document).ready(function(){
$("button").click(function(){
var div=$("div");
div.animate({left:'100px'},"slow");
div.animate({fontSize:'3em'},"slow");
div.animate({fontSize:'1em'},2000);
div.animate({opacity:'0'},"slow");
div.queue(function() {
div.html('New text');
div.dequeue(); // This is necessary to continue the animation
});
div.animate({opacity:'1'},"slow");
div.animate({left:'0px'},"slow");
});
});
您可以定義動畫監聽器，並在監聽器中更改文本：
$('div').animate(
{ opacity: 0 }, // and all the other properties you want to animate
{ duration: 50,
step: function(left){
// change text here after a particular progress
}
});
jQuery-如何同時為文本設置動畫以進行顏色變化過渡
[英]jQuery - How to animate text simultaneously to color change transition
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.