脚本只会最后一个文本和最后一个颜色，但会按照指示进行动画，发生了什么?

Script is only going to last text and last color but is animating as directed, what's going on?

本文关键字：最后一个 动画 什么 指示 发生了 文本 颜色 脚本      更新时间：2023-09-26

我能够像我想的那样在div周围移动文本，但我希望它是不同的颜色，并且在运动的不同部分有不同的文本/颜色，但它只调用最终的文本和颜色。jQuery函数的'slow'部分似乎只在移动的第一部分触发。

我做错了什么?

小提琴。HTML: 

<button id="button">Go!</button>
<br>
<br>
<br>
<br>
<div id="container">    
<div id="demo">Hello World</div>
</div>
CSS: 

#container {
   width: 100%;
   height: 400px;
}
JavaScript: 

$(document).ready(function(){
    $('#button').on('click', function(){
        var divWidth = ($('#container').width());
        var divHeight = ($('#container').height());
        $('#demo').css('color', '#ffff00');
        $('#demo').html("Going!");
        $('#demo').animate({
        'marginLeft' : '+=' + divWidth
        }, ' slow');
        $('#demo').html("Moving Down Now");
        $('#demo').css('color', '#e31912');
        $('#demo').animate({
        'marginTop' : '+=' + divHeight
        }, ' slow');
        $('#demo').html("Moving Home Now");
        $('#demo').css('color', '#00FFFF');
        $('#demo').animate({
        'marginLeft' : '-=' + divWidth,
        'marginTop' : '-=' + divHeight,
        }, ' slow');
        $('#demo').html("I am home!");
        $('#demo').css('color', '#ff0067');
    });
});

.animate()是异步的。动画按顺序出现，因为animate函数将动画附加到队列中。您可以使用.animate()的可选回调参数来避免这种情况。

( ) 

$(document).ready(function(){
    $('#button').on('click', function(){
        var demo = $('#demo');
        var divWidth = $('#container').width();
        var divHeight = $('#container').height();
        demo.css('color', '#ffff00').text("Going!").animate({
            'marginLeft' : '+=' + divWidth
        }, 'slow', function(){
            demo.css('color','#e31912').text("Moving Down Now").animate({
                'marginTop' : '+=' + divHeight
            }, 'slow', function(){
                demo.css('color', '#00FFFF').html("Moving Home Now").animate({
                    'marginLeft' : '-=' + divWidth,
                    'marginTop' : '-=' + divHeight,
                }, 'slow', function(){
                    demo.css('color', '#ff0067').html("I am home!");
                });
            });
        });
    });
});

你需要等到动画脚本完成:

`$('#demo').animate({
    'marginLeft' : '+=' + divWidth
    }, ' slow', function(){
....
});`
http://jsfiddle.net/xzzc4skq/1/

虽然默认情况下动画是排队的，但使用css()和html()方法进行的更改不会等待动画完成。它们都是立即执行的，没有任何延迟，您所看到的是最后一次设置。

比起嵌套动画，我建议将它们链接起来。然后使用"start"answers"complete"回调来设置HTML和CSS。回调函数将分别在每个动画之前和之后执行。

$(function() {
  $('#button').on('click', function() {
    var divWidth = 300,
      divHeight = 100;
    // stage #1
    $('#demo').animate({
      'marginLeft': '+=' + divWidth
    }, {
      duration: 'slow',
      start: function() {
        $(this).css('color', '#128800').html("Going!");
      }
    })
    // stage #2
    .animate({
      'marginTop': '+=' + divHeight
    }, {
      duration: 'slow',
      start: function() {
        $(this).css('color', '#e31912').html("Moving Down Now");
      }
    })
    // stage #3
    .animate({
      'marginLeft': '-=' + divWidth,
      'marginTop': '-=' + divHeight,
    }, {
      duration: 'slow',
      start: function() {
        $(this).css('color', '#3cacac').html("Moving Home Now");
      },
      complete: function() {
        $(this).css('color', '#ff0067').html("I am home!");
      }
    });
  });
});
#container {
  width: 100%;
  height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="button">Go!</button>
<br>
<br>
<div id="container">
  <div id="demo">Hello World</div>
</div>

相关文章：