可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I'm just now giving my first steps on jQuery animate(). I'm trying to make a presentation type thing just to practice, but I can't seem to be able to change the text of my div in the middle of the animation using the animate() function.

Here's my current code:

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

Is there a practical way I can change the text while the opacity is turned off, so when the animation returns the text is changed?

回答1:

You can use the queue function to queue up the change.

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

回答2:

You can define an animation-listener and change your text within the listener:

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

回答3:

This is not available in jQuery, but you can use the jQuery plugin typed.js, here is an example:

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

jQuery animate() change text

问题:

回答1:

回答2:

回答3:

收藏的人(0)

jQuery animate() change text

问题:

回答1:

回答2:

回答3:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮