Question

按下按钮时，我试图多次为div框设置动画。它应该向右，然后再向右，然后它有点下降，里面的文本应该改变，然后它将向左移动，并再次离开它原来的位置。我需要帮助解决两个问题：

应该发生文本更改！按下按钮后立即改变！在第三个动画之后，我该怎么做才能运行文本更改？
我得到一个输入数字框的值，并希望将其应用为速度论证。但是，当我将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/

就你的＃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将每个元素的动画入队，而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/

动画后JQuery文本更改

3 个答案: