动画导航笔记

摘要：1、jQuery的显示/隐藏hide()                 隐藏显示的元素  语法：hide([speed][sesing][function])speed:隐藏过程的速度，速度是毫秒值sesing:指定切换的效果function:动画完成时执行的一个函数$('元素').hide

1、jQuery的显示/隐藏

hide()                 隐藏显示的元素  

语法：

hide([speed][sesing][function])

speed:隐藏过程的速度，速度是毫秒值

sesing:指定切换的效果

function:动画完成时执行的一个函数

$('元素').hide()           隐藏

$('元素').hide(1000)       1000毫秒隐藏

show()                 显示隐藏的元素  

语法：

show([speed][sesing][function])

speed:隐藏过程的速度，速度是毫秒值

sesing:指定切换的效果

function:动画完成时执行的一个函数

$('元素').show()           隐藏

$('元素').show(1000)       1000毫秒隐藏

2、jQuery的滑动

slideDown()                 通过高度的变化，向下增大的动态效果，下滑效果  

语法：

slideDown([speed][function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

$('元素').slideDown()           下滑显示

$('元素').slideDown('slow')      缓慢

$('元素').slideDown('fast')      快速

$('元素').slideDown(1000)        1000毫秒速度

slideUp()                   通过高度的变化，向上减小的动态效果，上滑效果  

语法：

slideUp([speed][function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

slideToggle()                   通过高度的变化来切换元素的可见性   将上述两个效果合在一起的感觉

语法：

slideToggle([speed][function])

speed:上划隐藏/下滑显示 显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

3、jQuery的淡入淡出

fadeIn()                 通过不透明度的变化来实现匹配到元素的淡入的效果；  

语法：

fadeIn([speed][function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

fadeOut()                 通过不透明度的变化来实现匹配到元素的淡出的效果；  

语法：

fadeOut([speed][function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

fadeToggle()                 通过不透明度的变化来开关所有匹配元素的淡入淡出的效果；  

语法：

fadeToggle([speed]opacity[function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

fadeTo()                 把所有匹配到元素得不透明度以渐进的方式调整到指定的不透明度；  

语法：

fadeTo([speed]opacity[function])

speed:下滑显示过程的速度 英文值或者毫秒

function:动画完成时执行的一个函数

opacity：fadeTo（）方法钟必须参数，控制淡入淡出得效果得不透明度（值介于0与1之间）

4、jQuery的自定义动画

animate()

语法：

$(selector).animate({params},speed,function)

params:必须的参数，定义形成动画的css属性

speed:可选的参数，参数规定效果的市场。它可以取以下值：“slow”、“fast”或者毫秒

function:动画完成后所执行的一个函数

使用预定义值 show  hide  toggle

$('div').animate({width:'toggle'},1500)     切换淡入淡出

$('div').animate({width:'hide'},1500)       切换隐藏

$('div').animate({width:'show'},1500)       切换显示

停止动画

stop()   方法用于停止动画或效果，在它们完成之前；该方法适用于所有jQuery效果函数，包括滑动、淡入淡出和自定义动画

语法：

$(selector).stop(stopAll,goToEnd)

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

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

附：

简单写了一个导航动画的例子，效果请打开访问

http://226v65s957.imwork.net/zuoye/daohangdonghua/

批改老师：查无此人批改时间：2019-04-19 09:16:01
老师总结：完成的不错，每行jq代码结束要增加;号。继续加油。