jquery如何写动画

jQuery 是一个功能强大的 JavaScript 库，它能够大量地简化开发者和设计师的工作。其中，Jquery的动画效果更是成为了设计中最重要的元素之一。本文就将介绍如何使用 jQuery 来创建动画效果。

一、jQuery动画效果

jQuery 的动画效果一般使用 animate() 函数来实现。它允许程序员在一个或多个 CSS 属性上创建过渡动画。animate() 函数需要至少两个参数：要更改的 CSS 属性和变化的时间，可以选择第三个参数来指定完成后执行的函数。

下面的例子将演示如何更改元素的 CSS 属性，从而创建一个动画效果：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px', opacity: '0.5'}, 2000);
  });
});

上面的例子中，当 button 被点击时，div 元素将以 2000 毫秒的速度移动到左边 250 像素的距离处并且透明度变为 0.5。

二、jQuery的animate()函数

jQuery 的 animate() 函数可输入多个参数，包括 CSS 属性、变化持续时间以及函数。

下面的例子将演示如何使用 animate() 函数来同时更改多个CSS属性：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate(
      {
        left: '250px',
        opacity: '0.5',
        height: '150px',
        width: '150px'
      },
      2000
    );
  });
});

上面的例子中，我们同时更改了元素的位置、透明度、高度和宽度。这些变化将在 2000 毫秒的持续时间内完成。

三、jQuery的速度参数

jQuery 提供三个默认速度参数：slow、normal 和 fast。我们也可以使用数字来指定速度值。数字越大表示动画执行的越快。下面的例子演示了如何使用速度参数：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'}, "slow");
    $("div").animate({opacity: '0.5'}, "normal");
    $("div").animate({height: '150px', width: '150px'}, "fast");
  });
});

上面的例子将元素分别在缓慢、正常和快速的速度下显示动画效果。

四、jQuery的回调函数

在调用 animate() 函数时，我们可以向它传递一个回调函数。回调函数将在 animate() 函数执行完成后立即调用。

下面的例子演示如何使用回调函数：

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({
      left: '250px',
      opacity: '0.5'
    }, 2000, function() {
      alert("动画执行完毕!");
    });
  });
});

上面的例子在 animate() 函数执行完成后，调用了一个 alert() 函数。

五、jQuery的队列

jQuery 使用队列来存储要执行的所有函数。当我们使用 animate() 函数时，该函数实际上将一个函数添加到队列中。队列按照先进先出的原则运行。因此，如果我们想在动画完成后执行一些其他任务，则必须使用队列。

下面的例子演示如何使用队列来指定多个动画：

$(document).ready(function(){
  $("button").click(function(){
    var div = $("div");
    div.animate({left: '250px'}, 2000);
    div.animate({top: '250px'}, 2000);
    div.animate({left: '0px'}, 2000);
    div.animate({top: '0px'}, 2000);
  });
});

上面的例子将元素移动到右上角，然后返回到原始位置。

六、jQuery的清空队列

如果要在动画正在运行时清空队列，则必须使用 clearQueue() 函数。它将从正在运行的动画中删除后续要执行的所有函数。

下面的例子演示了如何清空队列：

$(document).ready(function(){
   $("button").click(function(){
     $("div").animate({left: '500px'}, 5000);
     $("div").animate({opacity: '0.0'}, 3000);
     $("div").animate({top: '200px'}, 5000);
     $("div").clearQueue();
   });
});

上面的例子将运动到中间时，清空了队列，即不再执行下一个动画。

七、jQuery的停止动画

如果要停止一个正在运行的动画，可以使用 stop() 函数。例如，如果我们想在按下一个停止按钮时停止上面的动画，则可以这样使用：

$("button").click(function(){
  $("div").stop();
});

八、综合应用

下面的例子演示了如何使用鼠标悬停和鼠标移除事件来启动和停止动画：

$(document).ready(function(){
  $("div").hover(function(){
    $(this).animate({left: '250px'});
  },
    function(){
    $(this).animate({left: '0px'});
  });
});

上面的例子将在鼠标悬停时将元素向右移动 250 像素，并在鼠标移开时返回原始位置。

九、总结

jQuery 的 animate() 函数使得创建动画效果变得十分容易。无论是基本动画、多个动画或回调函数都能够轻松地实现，只需要了解 jQuery 的基本操作和语法。

在进行动画设计时，我们需要根据网站或应用程序的需求来判断使用何种动画效果。我们可以在动画开始时添加适当的速度参数，从而为用户提供顺畅的用户体验。在动画执行期间，可以使用回调函数和队列来执行其他任何操作。在任何时候，都可以使用 stop()、clearQueue() 函数来停止或清空队列中的动画。

最后，JQuery 的动画功能是设计者必备的技巧，更是实现网页动画效果的利器，希望这篇文章能够帮助大家更好地理解和应用jQuery中的动画特效。