jQuery 效果

Posted 叶子玉

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了jQuery 效果相关的知识,希望对你有一定的参考价值。

显示和隐藏

1. show(speed) :speed 可以取:slow/fast/毫秒

1         $("#show").click(function(){
2             $("p").show(1000);
3         });

2. hide(speed) :

1         $("#hide").click(function(){
2             $("p").hide();
3         });

3. toggle() :切换 show() 和 hide() 方法

1         $("button").click(function(){
2             $("p").toggle();
3         });

淡入淡出

1. fadeIn(speed) :淡入已隐藏的元素

1         $("button").click(function(){
2             $("div").fadeIn();
3         });

2. fadeOut(speed) :淡出可见元素

1         $("button").click(function(){
2             $("div").fadeOut();
3         });

3. fadeToggle(speed) :在前两个方法之间切换

1         $("button").click(function(){
2             $("div").fadeToggle();
3         });

4. fadeTo(speed, opacity) :允许渐变为给定的不透明度(0-1)

1         $("button").click(function(){
2             $("div").fadeTo("slow",.3);
3         });

滑动

1. slideDown() :向下滑动元素

1         $("div1").click(function(){
2             $("div2").slideDown();
3         });

2. slideUp() :向上滑动元素

1         $("div1").click(function(){
2             $("div2").slideUp();
3         });

3. slideToggle() :在前两个方法之间切换

1         $("div1").click(function(){
2             $("div2").slideToggle();
3         });

动画

animate() :

1. 操作单个属性

1         $("button").click(function(){
2             $("div").animate({left:‘300px‘});
3         });

2. 操作多个属性

1         $("button").click(function(){
2             $("div").animate({
3                 left:‘300px‘,
4                 width:‘300px‘,
5                 height:‘300px‘,
6                 opacity:‘.3‘
7             });
8         });

3. 使用相对值

1         $("button").click(function(){
2             $("div").animate({
3                 left:‘300px‘,
4                 width:‘+=300px‘,
5                 height:‘+=300px‘,
6                 opacity:‘.3‘
7             });
8         });

4. 使用预定义值:动画的值可以设置为:show/hide/toggle

1         $("button").click(function(){
2             $("div").animate({
3                 height:‘toggle‘
4             });    
5         });

5. 队列功能

1         $("button").click(function(){
2             var div = $("div");
3             div.animate({width:‘300px‘,opacity:‘.3‘,"slow"});
4             div.animate({height:‘300px‘,opacity:‘.6‘,"slow"});
5             div.animate({width:‘100px‘,opacity:‘.3‘,"slow"});
6             div.animate({height:‘100px‘,opacity:‘.8‘,"slow"});
7         });

停止动画

stop() :

1         $("#stop").click(function(){
2             $("#panel").stop();
3         });

callback

效果完全实现以后回调函数,如果没有回调函数,效果会在完成前弹出

1         $("button").click(function(){
2             $("p").hide("slow",function(){
3                 alert("段落隐藏了");
4             });
5         });

 

以上是关于jQuery 效果的主要内容,如果未能解决你的问题,请参考以下文章

几个非常实用的JQuery代码片段

几条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

十条jQuery代码片段助力Web开发效率提升

jQuery 将 div 切片成动画片段

jQuery应用 代码片段