jQuery (二) 效果学习

来源：互联网发布：弗洛伊德算法怎么理解编辑：程序博客网时间：2024/05/18 01:33

在jQuery中有许多可视的效果，而且非常的方便，下面总结一下常见的效果

1. jQuery的隐藏和显示

jQuery hide() 隐藏对应的html标签

$("#test").click(function(){$("p").hide();});

jQuery show() 显示对应的html标签

$("#test").click(function(){$("p").show();});

jQuery toggle() 切换hide()和show()

$("#test").click(function(){$("p").toggle();});

2. jQuery的淡入和淡出

jQuery fadeIn(); 淡入

$(selector).fadeIn(speed,callback);

speed 可选“slow”、“fast”和毫秒

jQuery fadeOut(); 淡出

$(selector).fadeOut(speed,callback);

jQuery fadeToggle(); 淡入和淡出切换

$(selector).fadeToggle(speed,callback);

jQuery fadeTo(): 可以给定不透明度

$(selector).fadeTo(speed,opacity,callback);

3. jQuery滑动

jQuery slideDown() 下滑

$(selector).slideDown(speed,callback);

jQuery slideUp() 上滑

$(selector).slideUp(speed,callback);

jQuery slideToggle() 下滑和上滑切换

$(selector).slideToggle(speed,callback);

4.jQuery动画

jQuery animate() 方法创建自定义动画

$(selector).animate({params},speed,callback); 其中params参数是必须输入的自定义动画的css属性

注意：对位置进行操作时，首先必须把CSS的position属性设置为relative、fixed、absolute

例子：

$("#test").click(function(){$("div").animate({left:'120px',opacity:'0.5'height:'100px',width:'100px'});})

5. stop()

jQuery stop() 可以停止滑动和动画

$(selector).stop(stopAll,goToEnd); 参数stopAll是否清除当前动画队列，goToEnd参数规定是否立即完成当前动画，两个参数默认都是false

例子：

$("#stop").click(function(){$("#test").stop();});

6. Callback

jQuery Callback函数

当效果动画100%完成后，即可调用Callback函数，上面交的隐藏、显示、淡入、淡出、滑动、动画都可以用这个函数

例子：

$("#test").hide(3000,function(){alert("test the callback");})

7. Chaining

jQuery Chaining 允许一条语句执行多个jQuery方法

例子

$("#test").slideUp(2000).slideDown(2000).fadeIn(2000).fadeOut(2000);

参见：http://www.w3school.com.cn/jquery/jquery_hide_show.asp

0 0