jquery设置html动画,jQuery的动画操作

摘要：

jQuery动画效果

$(document).ready(function(){

// 1. 点击隐藏 $('selected').hide(speed,callback)

// 可选的speed的参数规定 隐藏 速度,可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 隐藏 完成后执行的函数

// $('#hide').click(function(){

// $('p').hide("slow");

// });

// 2. 点击显示 $('selected').show(speed,callback)

// 可选的speed的参数规定 显示 速度,可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 显示 完成后执行的函数

// $('#show').click(function(){

// $('p').show("fast");

// });

// 3. 向下滑动元素 $('selected').slideDown(speed,callback)

// 可选的speed的参数规定 下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 下滑 完成后执行的函数

// $('#flip').click(function(){

// $('#panel').slideDown(1000,function(){

// $('#flip').hide(); // 滑动完成后将id="flip"的元素隐藏

// });

// });

// 4. 向上滑动元素 $('selected').slideUp(speed,callback)

// 可选的speed的参数规定 上滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 上滑 完成后执行的函数

// $('#flip-1').click(function(){

// $('#panel-1').slideUp('fast');

// });

// 5. 向上滑动元素 $('selected').slideToggle(speed,callback)

// 可选的speed的参数规定 上下滑 速度,可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是完成后执行的函数

// 此方法可以向上向下滑动功能.

// $('.flip').click(function(){

// $('.panel').slideToggle(1000);

// });

// 6. fadeIn() 用于 淡入 已隐藏的元素 $('selected').fadeIn(speed,callback)

// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 fadeIn 完成后执行的函数

// $('#btn1').click(function(){

// $('#div1').fadeIn('fast');

// $('#div2').fadeIn('slow');

// $('#div3').fadeIn(3000);

// });

// 7. fadeOut() 用于 淡出 已隐藏的元素 $('selected').fadeOut(speed,callback)

// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 fadeOut 完成后执行的函数

// $('#btn2').click(function(){

// $('#div4').fadeOut('fast');

// $('#div5').fadeOut('slow');

// $('#div6').fadeOut(3000);

// });

// 8. $('selected').fadeToggle(speed,callback) 用于在fadeIn() 与 fadeOut之间进行切换

// 可选的speed参数规定效果的时长 它可以取以下值:"slow" "fast"或 毫秒"1000"

// 可选的callback参数是 fadeing 完成后执行的函数

// $('#btn3').click(function(){

// $('#div7').fadeToggle(3000);

// $('#div8').fadeToggle('slow');

// $('#div9').fadeToggle('fast');

// });

// 9. $('selected').fadeTo() 允许渐变给定的不透明度(值介于0与1之间)

// 必需的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

// fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。

// 可选的 callback 参数是该函数完成后所执行的函数名称。

// $('#btn4').click(function(){

// $('#div10').fadeTo('slow', 0.15);

// $('#div11').fadeTo('slow', 0.8);

// $('#div12').fadeTo('slow', 0.4);

// });

// 10. $('selected').animate({params},speed,callback);

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

// 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。

// 可选的 callback 参数是动画完成后所执行的函数名称。

// $('#btn5').click(function(){

// $('#div13').animate({left:'250px'},'slow');

// });

// 操作多个属性

// $('#btn5').click(function(){

// $('#div13').animate({left:'250px',opacity:'0.5',height:'150px',width:'150px',borderRadius:'50%'},'slow');

// });

// 使用相对值

// $('#btn5').click(function(){

// $('#div13').animate({left:'250px',height:'+=150px',width:'+=150px'},'slow');

// });

// 使用预定义的值 ,可以把属性的动画值设置为"slow" "hide" "toggle"

// $('#btn5').click(function(){

// $('#div13').animate({height:'toggle'},'slow');

// });

// 使用队列功能

$('#btn5').click(function(){

var div = $('#div13');

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');

});

});

#panel, #flip{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}

#panel{padding: 50px;display: none;}

#panel-1, #flip-1{padding: 5px;text-align: center;background: #FF6700;border: 1px solid #c3c3c3;}

#panel-1{padding: 50px;}

点击"隐藏"我将会消失,点击"显示"我将会出来

隐藏

显示

---

点我滑下面板

Hello World!

---

点我收起面板

Hello World!

---

点我 "下滑" 或者 "上滑"

Hello World!

---

点击淡入 div 元素

---

点击淡出 div 元素

---

点击淡入\淡出 div 元素

---

点击我让颜色变淡

---

开始动画

批改老师：查无此人批改时间：2019-02-12 14:27:17

老师总结：完成的不错，学到这里，你的jQuery应该都会了，可以学新知识了。加油