今天向大家来分享一下JQuery的一些效果,这些都相对比较简单
1.显示和隐藏效果
hide()
隐藏元素
show()
显示元素
语法
$(sector).hide(speed,callback)
$(sector).show(speed,callback)
speed 为速度,callback为函数名称
2 淡入淡出效果
fadeIn()
淡入效果
fadeOut()
淡出效果
fadeToggle()
淡入、淡出效果
fadeTo()
允许方法给出指定的透明度(0-1之间)
语法
$(selector).fadeIn(speed,callback);
$(selector).fadeOut(speed,callback);
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)
speed 为速度,opacity为透明度 callback为函数名称
3. 滑动效果
sildeDown()
向下滑动
slideUp()
向上滑动
slideToggle()
向上向下滑动
语法相识就不一一举例
4 动画效果
animate()
用于创建自己的动画
语法
$(selector).animate({params},speed,callback);
params :形成动画的一些css属性
可以多个动画一起执行
例如:
$("button").click(function(){ $("div").animate(
{ left:'250px', opacity:'0.5', height:'150px', width:'150px' }
); });
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
注意:1 .可以用 animate() 方法来操作所有 CSS 属性吗?
是的,几乎可以!不过,需要记住一件重要的事情:当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。
2. 默认情况下,所有 HTML 元素都有一个静态位置,且无法移动。
如需对位置进行操作,要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute!
停止动画
stop()
具体例子见