JQuery学习之各种效果演示

1.隐藏与显示：hide()和show()，toggle()

**隐藏：

$("#hide").click(function(){

　　$("p").hide();

});

**显示：

$("#show").click(function(){

　　#("p").show();

});

**切换：toggle()方法来切换hide()和show()方法

$("button").click(function(){

　　$("p").toggle();

});

**语法：

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

//speed参数用于规定隐藏/显示的速度，可以取：slow，fast或毫秒

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

//callback参数是显示或隐藏完成后执行的函数名称

 

 

2.淡入淡出：

**fadenln():可以实现元素的淡入效果：

$("button").click(function(){

　　$("#div1").fadeIn();

　　$("#div2").fadeIn("slow");

　　$("#div3").fadeIn("3000");

});

语法：$(selector).fadeIn(speed,callback);    //speed参数规定效果的时长，callback参数是fading完成后执行的函数名称

 

**fadeOut():用于淡出可见元素，语法同上

$("button").click(function(){

　　$("#div1").fadeOut();

　　$("#div2").fadeOut("slow");

　　$("#div3").fadeOut(3000);

});

 

**fadeToggle():可以实现fadeIn()和fadeOut()之间的切换，语法参数同上；

如果元素已淡出，则fadeToggle()会向元素添加淡入效果；

如果元素已淡入，则fadeToggle()会向元素添加淡出效果；

$("button").click(function(){

　　$("#div1").fadeToggle();

　　$("#div2").fadeToggle("slow");

　　$("#div3").fadeToggle(3000);

});

 

**fadeTo():允许渐变为给定的不透明度（值介于0与1之间）

$("button").click(function(){

　　$("#div1").fadeTo("slow",0.15);

　　$("#div2").fadeTo("slow",0.4);

　　$("#div3").fadeTo("slow",0.7);

});

语法：$(selector).fadeTo(speed,opacity,callback);      //opacity参数将淡入淡出效果设置为给定的不透明度

 

 

3.滑动：

**slideDown():用于向下滑动元素

$("#flip").click(function(){

　　$("#panel").slideDown();

});

语法：$(selector).slideDown(speed,callback);     //参数使用同上

 

**slideUp():用于向上滑动元素,语法同上

$("#flip").click(function(){

　　$("#panel").slideUp();

});

 

**sideToggle():可以在slideDown()和slideUp()方法之间进行切换,语法同上：

$("#flip").click(function(){

　　$("#panel").slideToggle();

});

 

 

4.动画：

**animate():用于创建自定义动画

$("button").click(function(){

　　$("#div").animate({left:'250px'});

});

语法：$(selector).animate({params},speed,callback);

//params参数定义形成动画的CSS属性

//speed参数规定效果的时长

//callback参数是动画完成之后所执行的函数名称

 

**animate()操作多个属性：

$("button").click(function(){

　　$("div").animate({

　　　　left:'250px',

　　　　opacity:'0.5',

　　　　height: '150px',

　　　　width:'150px'

    });

});

 

**animate():使用相对值（该值相对于元素的当前值）

$("button").click(function(){

　　$("div").animate({

　　　　left:'250px',

　　      height:'+=150px',

　　　　width:'+=150px'

　　});

});

 

**animate()使用预定义的值,可以把属性的动画设置为“show”“hide”或“toggle”：

$("button").click(function(){

　　$("div").animate({

　　　　height:'toggle'

　　});

});

 

**animate()使用队列功能,多个animate同时实现，排队进行：

$("button").click(function(){

　　var div=$("div");

　　div.animate({left:'100px'},"slow");

　　div.animate({fontSize:'3em'},"slow")

});

 

 

5.停止动画：stop()方法适用于所有jQuery效果函数，包括滑动，淡入淡出和自定义动画

$("#stop").click(function(){

　　$("#panel").stop();

});

 

语法：$(selector).stop(stopAll,goToEnd);

//stopAll参数规定是否应该清楚动画队列，默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行

//goToEnd参数规定是否立即完成当前动画，，默认是false

//默认的，stop()会清除在被元素指定的当前动画

 

 

6.Callback方法:

**在隐藏效果完全实现后回调函数：

$("button").click(function(){

　　$("p").hide("slow",function(){

　　　alert("The paragrah is now hidden");　

　　});

});

 

**没有回调函数时，警告框会在隐藏效果完成前弹出：

$("button").click(function(){

　　$("p").hide(1000);

　　alert("The paragraph is now hidden");

});

 

 

7.Chaining方法：允许我们在一条语句中运行多个jQuery方法（在相同的元素上）

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

//先css变颜色，在向上滑动，然后向下滑动

 

 

有些人之所以不断成长，就绝对是有一种坚持下去的力量。好读书，肯下功夫，不仅读，还做笔记。人要成长，必有原因，背后的努力与积累一定数倍于普通人。所以，关键还在于自己。