Jquery动画效果

根据  jquery官网api文档编写   https://www.jq22.com/chm/jquery/index.html 

一、基本效果

Jquery动画效果

关于以下属性中的 easing 想要更好的去了解这个属性 https://www.runoob.com/jqueryui/api-easings.html 我想这里会更加清晰明了

1.show()    显示隐藏的匹配元素。语法:show([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

fn:在动画完成时执行的函数,每个元素执行一次 (回调函数)。

2.hide()    显示隐藏的匹配元素。语法:hide([speed,[easing],[fn]])

speed:三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如:1000)

fn:在动画完成时执行的函数,每个元素执行一次 (回调函数)。

3.toggle()   1.9版本 .toggle() 方法删除,它很实用,如果元素是可见的,切换为隐藏的;如果元素是隐藏的,切换为可见的。

二、滑动效果(与show,hide相似,不同点是动画效果不同以下几点都是 )

 

Jquery动画效果

1.slideDown()       通过高度变化(向下增大)来动态地显示所有匹配的元素,在显示完成后可选地触发一个回调函数。

2.slideUp()       通过高度变化(向上减小)来动态地隐藏所有匹配的元素,在隐藏完成后可选地触发一个回调函数。

3.slideToggle()     通过高度变化来切换所有匹配元素的可见性,并在切换完成后可选地触发一个回调函数。

三、淡入淡出效果(淡入淡出是改变元素的透明度实现隐藏显现不会修改宽高,这是和上面的两种效果的区

Jquery动画效果

1.fadeIn()              通过不透明度的变化来实现所有匹配元素的淡入效果,并在动画完成后可选地触发一个回调函数。

2.fadeOut()           通过不透明度的变化来实现所有匹配元素的淡出效果,并在动画完成后可选地触发一个回调函数。

3.fadeTo()            把所有匹配元素的不透明度以渐进方式调整到指定的不透明度,并在动画完成后可选地触发一个回调函数

eg:$("img:eq(2)").fadeTo(3000,0.3);         // fadeTo()方法 将图片以3000毫秒的时间过渡到0,3的透明度

4.fadeToggle()    通过不透明度的变化来开关所有匹配元素的淡入和淡出效果,并在动画完成后可选地触发一个回调函数。

四、自定义效果(自定义效果相当于集以上效果于一身,可以改变元素的宽高,透明度等属性.....

Jquery动画效果

1.animate()         animate() 方法执行 CSS 属性集的自定义动画。该方法通过CSS样式将元素从一个状态改变为另一个状态。

CSS属性值是逐渐改变的,这样就可以创建动画效果。只有数字值可创建动画(比如 "margin:30px")。

字符串值无法创建动画(比如 "background-color:red")。

语法如下:

$("button:eq(10)").click(function(){ //animate()方法 $("img:eq(3)").animate({ //让图片经历3秒宽度变成200px 高度变成200px 透明度变成0.5 width:"300px", height:"200px", opacity:"0.5", },3000); });

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zzzppf.html