jQuery 效果 - 动画 | JayMo个人网站

基础要扎实。对于我来说，虽然学了好多好泛，但却没有学扎实，所以，这是一个复习JQuery动画的一篇文章，很基础。

jQuery 效果 - 隐藏和显示

包括隐藏、显示、切换，滑动，淡入淡出，以及动画，哇哦

jQuery hide()

$(“#hide”).click(function(){
```
$("p").hide();
```
});

show()与hide()类似
$(“#show”).click(function(){
$(“p”).show();
});

语法：

$(selector).hide(speed,callback);

$(selector).show(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。

可选的 callback 参数是隐藏或显示完成后所执行的函数名称

jQuery toggle()

使用 toggle() 方法来切换 hide() 和 show()

$("button").click(function(){
  $("p").toggle();
});

演示地址

jQuery 效果 - 淡入淡出

jQuery fadeIn()
jQuery fadeOut()
jQuery fadeToggle()
jQuery fadeTo()

jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）
语法：

$(selector).fadeTo(speed,opacity,callback);

jQuery 效果 - 滑动

slideDown()
slideUp()
slideToggle()

slideToggle() 方法演示

jQuery animate()动画

Query animate() 方法用于创建自定义动画。

语法：

$(selector).animate({params},speed,callback);

必需的 params 参数定义形成动画的 CSS 属性

下面的例子演示 animate() 方法的简单应用；它把

元素移动到左边，直到 left 属性等于 250 像素为止：

$("button").click(function(){
     $("div").animate({left:'250px'});
   });

演示地址
ps：生成动画的过程中可同时使用多个属性

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

可以用 animate() 方法来操作所有 CSS 属性吗？

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。

同时，色彩动画并不包含在核心 jQuery 库中。

如果需要生成颜色动画，您需要从 jQuery.com 下载 Color Animations 插件。

jQuery animate() - 使用预定义的值

您甚至可以把属性的动画值设置为 “show”、”hide” 或 “toggle”：

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

jQuery animate() - 使用队列功能

如果您希望在彼此之后执行不同的动画，那么我们要利用队列功能：

$("button").click(function(){
  var div=$("div");
  div.animate({height:'300px',opacity:'0.4'},"slow");
  div.animate({width:'300px',opacity:'0.8'},"slow");
  div.animate({height:'100px',opacity:'0.4'},"slow");
  div.animate({width:'100px',opacity:'0.8'},"slow");
});

jQuery 停止动画

jQuery stop() 方法用于在动画或效果完成前对它们进行停止。

jQuery stop() 滑动
语法：

$(selector).stop(stopAll,goToEnd);

可选的 stopAll 参数规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行。

可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。

因此，默认地，stop() 会清除在被选元素上指定的当前动画。

jQuery Callback 函数

Callback 函数在当前动画 100% 完成之后执行。

由于 JavaScript 语句（指令）是逐一执行的 - 按照次序，动画之后的语句可能会产生错误或页面冲突，因为动画还没有完成。

为了避免这个情况，您可以以参数的形式添加 Callback 函数。

典型的语法：

$(selector).hide(speed,callback)

错误（没有 callback）:

$("p").hide(1000);
alert("The paragraph is now hidden");

jQuery - Chaining

通过 jQuery，您可以把动作/方法链接起来。
Chaining 允许我们在一条语句中允许多个 jQuery 方法（在相同的元素上）。

例子 1
下面的例子把 css(), slideUp(), and slideDown() 链接在一起。”p1” 元素首先会变为红色，然后向上滑动，然后向下滑动：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

这些是jquery的基础动画，jquery真的是一个经典的库！！！

本作品采用知识共享署名 2.5 中国大陆许可协议进行许可，欢迎转载，但转载请注明来自JayMo，并保持转载后文章内容的完整。本人保留所有版权相关权利。
本文永久链接：http://jaymo666.github.io/2017/06/19/jQuery-效果-动画/