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

您也可以尝试以下方法：使用。

您去这里：http：//jsfiddle.net/9rutx/1/

根据您的＃2问题。我对其进行了测试，似乎效果很好。您是否将其安装出来，看看它是否进入您的VAR号码。也许在上面做一个类型，看看它是什么。

$(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 enqueue的动画的每元素，而跨度是不同的元素。您应该将文本更改代码放在回调函数中，以便上一个动画完成后。这是一个例子。

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