我不明白我的 jQuery 代码是如何执行的。如何实现所需的动画？ [复制]

Posted 2023-05-08

【中文标题】我不明白我的 jQuery 代码是如何执行的。如何实现所需的动画？ [复制]

【英文标题】：I don't understand how my jQuery code is executed. how to achieve the required animation? [duplicate]

【发布时间】：2022-01-11 05:40:10

【问题描述】：

这里是代码

https://jsfiddle.net/zdu1efrj/

$(document).ready( function()  
    
    // start box animation code
    let animatedBox = $('.box');
    animatedBox.css('backgound', 'red');
     
    animatedBox.animate(
        
            left: '500px', 
            height: '250px', 
            width: '250px'
        , 1000);
    
    animatedBox.css('background', 'blue');

    animatedBox.animate(
        
            top: '500px', 
            height: '100px', 
            width: '100px'
        , 1000);

    // end box animation code 
);

我希望动画中的框是红色的，只要它垂直移动，然后将其颜色更改为蓝色并向下移动。

为什么代码没有按顺序执行？

为什么animatedBox.css('background', 'blue'); 似乎在完成之前执行了

animatedBox.animate(
       
           left: '500px', 
           height: '250px', 
           width: '250px'
       , 1000);```
?

【问题讨论】：

阅读documentation。 .animate 接受动画完成时执行的回调函数。

@AhmedAlaaMo 刚刚将此帖子标记为已关闭，如果您已经得到答案的话。 :)

@jrran90 好的，我去回答。

【参考方案1】：

这里的问题是因为animate() 调用实际上是异步的，因为操作被放置在队列中并在稍后运行。但是，css() 调用没有排队/异步，因此会立即执行。

要解决此问题，请使用animate() 方法的回调参数，以便在第一个动画序列完成后更改元素的颜色：

animatedBox.animate(
  left: '500px',
  height: '250px',
  width: '250px'
, 1000, function() 
  animatedBox.css('background', 'blue');  
);

然而，这一切都可以通过单独使用 CSS 更有效、性能更高地实现：

body  position: relative; 

.box 
  position: absolute;
  left: 0;
  top: 0;
  width: 100px;
  height: 100px;
  position: absolute;
  background-color: red;
  animation: box-movement 2s forwards;


@keyframes box-movement 
  50% 
    left: 500px;
    top: 0;
    height: 250px;
    width: 250px;
    background-color: red;
  
  100% 
    left: 500px;
    top: 500px;
    height: 100px;
    width: 100px;
    background-color: blue;
  

<div class="box"></div>