動畫后jQuery文本更改

Question

按下按鈕時，我試圖為div框設置動畫多次。 它應該向右移動，然后再次向右移動，然后向下移動一點，里面的文本應該更改，然后向左移動，然后再次左移到其原始位置。 我需要解決兩個問題：

1. 文本更改不會在應有的時候發生！ 按下按鈕后，它立即改變！ 我應該怎么做才能在第三個動畫之后運行文本更改？

2. 我得到一個輸入數字框的值，並想將其用作速度參數。 但是當我用number代替speed ，它不起作用。 我必須手動將其設置為2000。這里出了什么問題？

JavaSript代碼：

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

您也可以嘗試：使用.when和.then

在這里，您可以： http : //jsfiddle.net/9RuTX/1/

關於您的第二個問題。 我測試了一下，它似乎工作正常。 您是否進行過調配，並查看它是否進入了您的var號。 也許對它進行typeof看看它是什么。

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

發生這種情況是因為jQuery將每個元素的動畫排入隊列，並且span是一個不同的元素。 您應該在上一個動畫完成時將文本更改代碼放入回調函數中。 這是一個例子。

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

如果需要，您還可以延遲跟隨動畫，以使其不會與像這樣的文本更改代碼同時運行。

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

這是一個基於您的jsFiddle的工作示例。

http://jsfiddle.net/LSegC/

Answer 3

嘗試這個

    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();

只需將其添加到動畫隊列中，它將在之前的動畫完成后執行。

相關演示： http : //jsfiddle.net/DerekL/qn893/1/