动画后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/