Question

我可以像我想的那样在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');

    });
});

Answer 1

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

（Demo）

$(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!");
                });
            });
        });

    });
});

Answer 2

你需要等到animate脚本完成：

`$('#demo').animate({
    'marginLeft' : '+=' + divWidth
    }, ' slow', function(){
....
});`

http://jsfiddle.net/xzzc4skq/1/

Answer 3

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

我建议您将动画链接起来，而不是嵌套动画。然后使用“开始”和“完成”callbacks来设置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>

脚本只会持续文本和最后一种颜色，但是按指示制作动画，发生了什么？

3 个答案: