Javascript jQuery animate（）更改文本_Javascript_Jquery_Html_Animation_Jquery Animate

Javascript jQuery animate（）更改文本

javascript jquery html animation

Javascript jQuery animate（）更改文本,javascript,jquery,html,animation,jquery-animate,Javascript,Jquery,Html,Animation,Jquery Animate,我刚刚介绍了jQuery animate（）的第一步。我想做一个演示类型的东西只是为了实践，但我似乎不能改变我的div文本在动画中使用动画（）函数。以下是我当前的代码： <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> </script> <script> $(document).ready

我刚刚介绍了jQuery 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>


$（文档）.ready（函数（）{
$（“按钮”）。单击（函数（）{
var div=$（“div”）；
动画（{左：'100px'}，“慢”）；
div.animate（{fontSize:'3em'}，“slow”）；
div.animate（{fontSize:'1em'}，2000年）；
动画（{opacity:'0'}，“slow”）；
//我可以用动画改变文本吗？？？
动画（{opacity:'1'}，“slow”）；
动画（{左：'0px'}，“慢”）；
});
});
启动动画
你好

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

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

$('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插件，如下所示：

您可以使用将更改排队

$(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.text（'HI！'）我个人已经完全停止使用Jquery的动画，这有利于GSAP和TweenJS。这两个参数都值得检查（GSAP更适合文本内容）skobaljic，它将立即更改文本，而不是在动画过程中。动画有一个回调函数，将它放在那里（作为最后一个参数），格式为：

（选择器）。动画（{style}，速度，放松，回调）

。

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