JQuery笔记二 ：动画效果【蓝鸥HTML5出品】

JQuery笔记二 ：动画效果【蓝鸥HTML5出品】

【HTML5教程】微信小程序全方位深度解析CSDN学院观看地址：http://edu.csdn.NET/lecturer/992

隐藏和显示

``` // 隐藏h1标签 $("h1").hide();

// 显示h1标签 $("h2").show(); ```

刚刚的显示和隐藏是不带任何效果的，看起来很生硬。添加效果，so easy

``` // 通过1s的时间隐藏h1标签 $("h1").hide(1000);

// 通过0.5s的时间显示h1标签 $("h2").show(500); ```

注意：括号中的时间单位是毫秒

toggle()

// 点击id为show_hide的按钮，可以进行隐藏和显示h1标签，动画效果时间为500毫秒 $('#show_hide').click(function () { $('h1').toggle(500); });

 

淡入淡出

fadeIn()： 淡入

$('#show').click(function () { $('h1').fadeIn(); }); fadeOut(); 淡出

$('#hidden').click(function () { $('h1').fadeOut('slow'); });

fadeToggle(): 和Toggle()相似，具有两种效果，就是淡入也是淡出

$('#show_hide').click(function () { $('h1').fadeToggle('fast'); });

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

// h1标签，慢速渐变为透明度为0.5 $('h1').fadeTo('slow', 0.5);

另外：
// 可以防止三个参数： 动画时间， 透明度结果， 动画执行结束的函数 $('h1').fadeTo('slow', 0.14, function () { // 当动画结束的时候，执行此函数(适用于其他函数) alert("动画结束"); });

 

滑动

slideDown(): 下滑动展开

// h1标签滑动展开 $('h1').slideDown();

slideUp(): 上滑动收起

// h1标签滑动收起 $('h1').slideUp();

slideToggle(): 兼具展开和收起的功能

// h1标签可以展开，可以收起 $('h1').slideToggle('slow');

 

动画

利用JQ提供的animate()函数，我们可以自定义动画效果

// 给h1标签添加动画，动画作用: // 参数1： 效果为 左间距、透明度; // 参数2： 动画时间2秒; // 参数3： 动画结束之后执行函数 $('h1').animate({marginLeft: '200px', opacity: '0.2'}, 2000, function () { alert("动画结束"); });

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

是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用marginRight 而不是 margin-right，等等。同时，色彩动画并不包含在核心 jQuery 库中。

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

animate() 函数可以使用相对值

``` // 在自身的基础上，高度增加100px $('h1').animate({height: '+=100px'});

// 当然，建议把代码格式写份这个样子，看起来更加清爽
$('h1').animate({ height: '+=100px' }); ```

animate() 函数可以使用预定值
预定值包括： show、hide、toggle

$('h1').animate({ height: 'toggle', margin: 'toggle', padding: 'toggle });

animate() 函数使用队列功能
队列功能就是让动画效果顺序执行

// 点击按钮的时候，是id为div1的元素进行动画效果 // 首先高度增加200像素，再宽度增加200像素，然后再高度减去200像素，最后宽度减去200像素 $('button').click(function () { var div = $('#div1'); div.animate({height: '+=200px'}); div.animate({width: '+=200px'}); div.animate({height: '-=200px'}); div.animate({width: '-=200px'}); });

停止动画

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画。

// 函数语法 $(selector).stop(stopAll, goToEnd) // 参数1 stopAll：规定是否应该清除动画队列。默认是 false，即仅停止活动的动画，允许任何排入队列的动画向后执行 // 参数2 goToEnd：规定是否立即完成当前动画。默认是 false

代码展示：

``` // 点击id为flip的按钮，使id为panel的标签进行动画 $("#flip").click(function () { $("#panel").slideDown(5000); });

// 点击id为stop的按钮，使id为panel的动画效果停止 $("#stop").click(function () { $("#panel").stop(); }); ```

Callback

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

没有callback回调函数

// 如果这样编写，会在动画结束之前弹出警告框 // 如果希望动画结束后弹出框，需要使用callback函数 $("button").click(function(){ $("p").hide(1000); alert("动画结束"); });

使用callback回调函数

// 在hide函数中，第二个参数几位callback回到函数，当动画结束的时候，讲执行此函数 $("button").click(function () { $("p").hide("slow", function () { alert("动画结束"); }); });

注意：callback函数几乎适用于所有动画函数

Chaining

通过 jQuery，可以把方法链接在一起写
Chaining 允许我们在一条语句中编写多个 jQuery 方法（在相同的元素上）
注意： 这样的话，浏览器就不必多次查找相同的元素

``` // 元素首先背景改变颜色，在执行收起动画，最后执行展开动画 $('#div1').css("backgroundColor", 'cyan').slideUp('slow').slideDown(2000);

// 当多个方法链接在一起的时候，可读性会降低。当然，我们可以这样写： $('#div1').css("backgroundColor", 'cyan') .slideUp('slow') .slideDown(2000); // jQuery 会抛掉多余的空格，并当成一行长代码来执行上面的代码行 ```