动画后jQuery文本更改

Question

I'm trying to animate a div box for several times when a button is pressed. It shall go right, and again right, then it comes a bit down and the text inside should change, and then it shall go left, and again left to its original place. There are two problems that I need help with:

1. The text change doesn't occur when it should! It changes immediately after I press the button! What should I do to run the text change just AFTER the third animation?

2. I get the value of an input number box, and want to apply it as the speed argument. But when I put number instead of speed , it does not work. I have to set it manually like 2000. What is wrong here?

JavaSript Code:

$(document).ready(function(){
  $("button").click(function(){
  var d=$("#t");
  var number=$("#number1").val();
  var speed=2000;

  if(state==true){
        d.animate({left:'+=230px'}, speed);
        d.animate({left:'+=230px'}, speed);
        d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4);
        $('#span').fadeOut(500, function() {
        $(this).text('a1').fadeIn(500);
        });     
        d.animate({left:'-=230px'}, speed);
        d.animate({left:'-=230px'}, speed);
        d.fadeOut();

        }
  });
});

Answer 1

You can also try this: use .when and .then

Here you go: http://jsfiddle.net/9RuTX/1/

In terms of your #2 problem. I tested it out and it seems to work fine. Have you consoled it out and see if its getting in your var number. Perhaps do a typeof on it and see what it is.

$(document).ready(function(){
  $("button").click(function(){
  var d=$("#t");
  var number=$("#number1").val();
  var speed=2000;
  if(state==true){
        $.when(
        d.animate({left:'+=230px'}, speed),
        d.animate({left:'+=230px'}, speed),
        d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4)
       ).then( function(){
            $('#span').fadeOut(500, function() {
                  $('#span').hide().text('a1').fadeIn(500);
            })
          }
             ).then( function(){
        d.animate({left:'-=230px'}, speed)
        d.animate({left:'-=230px'}, speed)
        d.fadeOut()
        }
       )
  }
  });
});

Answer 2

This happens because jQuery enqueue's animations per-element, and the span is a different element. You should put the text changing code in a callback function for when the previous animation completes. Here's an example.

<script> 
$(document).ready(function(){
  $("button").click(function(){
  var d=$("#t");
  var number=$("#number1").val();
  var speed=2000;

  if(state==true){
        d.animate({left:'+=230px'}, speed);
        d.animate({left:'+=230px'}, speed);
        d.animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4, "swing", function(){
            $('#span').fadeOut(500, function() {
                $(this).text('a1').fadeIn(500);
            });
        });
        d.animate({left:'-=230px'}, speed);
        d.animate({left:'-=230px'}, speed);
        d.fadeOut();

        }
  });
});
</script>

If needed, you can also delay you following animation so that it will not run simultaneously with the text changing code like this.

d.delay(500).animate({left:'-=230px'}, speed);

Here is a working example based on you jsFiddle.

http://jsfiddle.net/LSegC/

Answer 3

Try this

    d.animate({left:'+=230px'}, speed)
     .animate({left:'+=230px'}, speed)
     .animate({top:'+=20px', backgroundColor: "#f09090", text:'12'}, speed/4)
     .queue(function(){
         var q = $(this);
         $('#span').fadeOut(500, function() {
             $(this).text('a1').fadeIn(500, function(){ q.dequeue() });
         });
     })
     .animate({left:'-=230px'}, speed)
     .animate({left:'-=230px'}, speed)
     .fadeOut();

Just add it to the animation queue and it will get executed after the previous animations are done.

Related demo: http://jsfiddle.net/DerekL/qn893/1/