首页 > 代码库 > JQuery学习之各种效果演示
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);
$(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变颜色，在向上滑动，然后向下滑动
JQuery学习之各种效果演示
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。