Question

我现在刚刚开始使用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>

是否有一种实用的方法可以在关闭不透明度时更改文本，所以当动画返回时文本被更改了？

Answer 1

您可以使用queue function对更改进行排队。

$(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");
    });
 });

Answer 2

您可以定义动画侦听器并在侦听器中更改文本：

$('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
      }
});

Answer 3

这在jQuery中不可用，但你可以使用jQuery插件typed.js，这里是an example：

  div.typed({ strings: ["HELLO", "It's me..."], typeSpeed: 0 });

jQuery animate（）更改文本

3 个答案: