jQuery 隐藏、显示、淡入淡出、滑动
来源:互联网 发布:程序员未来前景怎么样 编辑:程序博客网 时间:2024/05/21 11:25
jQuery hide() 和 show() 隐藏、显示
通过 jQuery,您可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
(“#hide”).click(function(){(“p”).hide();
});
(“#show”).click(function(){(“p”).show();
});
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
jQuery toggle()
通过 jQuery,您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
显示被隐藏的元素,并隐藏已显示的元素:
通过 jQuery,您可以实现元素的淡入淡出效果。
jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeIn() 方法:
实例
$("button").click(function(){ $("#div1").fadeIn(); $("#div2").fadeIn("slow"); $("#div3").fadeIn(3000);});
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeOut() 方法:
实例
$("button").click(function(){ $("#div1").fadeOut(); $("#div2").fadeOut("slow"); $("#div3").fadeOut(3000);});
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeToggle() 方法:
实例
$("button").click(function(){ $("#div1").fadeToggle(); $("#div2").fadeToggle("slow"); $("#div3").fadeToggle(3000);});
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
下面的例子演示了带有不同参数的 fadeTo() 方法:
实例
$("button").click(function(){ $("#div1").fadeTo("slow",0.15); $("#div2").fadeTo("slow",0.4); $("#div3").fadeTo("slow",0.7);});
jQuery 滑动方法可使元素上下滑动。
jQuery 滑动方法
通过 jQuery,您可以在元素上创建滑动效果。
jQuery 拥有以下滑动方法:
slideDown()
slideUp()
slideToggle()
jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
语法:
$(“#panel”).slideDown();
});jQuery slideUp() 方法**
jQuery slideUp() 方法用于向上滑动元素。
语法:
$(selector).slideUp(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideUp() 方法:
实例
$("#flip").click(function(){ $("#panel").slideUp();});
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动,则 slideToggle() 可向上滑动它们。
如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:”slow”、”fast” 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
下面的例子演示了 slideToggle() 方法:
实例
$("#flip").click(function(){$("#panel").slideToggle();});
- jQuery效果--显示隐藏/淡入淡出/滑动
- jQuery 隐藏、显示、淡入淡出、滑动
- JQuery 效果之隐藏与显示、淡入淡出、滑动、回调
- jQuery来了--效果--隐藏和显示,淡入淡出,滑动
- jQuery效果之隐藏与显示、淡入淡出、滑动、回调
- jquery隐藏、显示、切换,滑动,淡入淡出,以及动画
- jquery中实现显示、隐藏、淡入淡出
- jQuery效果显示隐藏淡入淡出
- jquery学习笔记----隐藏、显示、切换,滑动,淡入淡出,以及动画
- Jquery—效果(隐藏、显示、切换,滑动,淡入淡出及动画)
- jQuery效果-隐藏、显示、切换、滑动、淡入淡出以及动画。
- jQuery学习_动作效果(隐藏、显示、切换,滑动,淡入淡出,以及动画)
- jQuery学习笔记-----------(显示、淡入淡出、滑动、动画、callback、链接)
- jquer隐藏显示淡入淡出
- jQuery 之 隐藏显示与淡入淡出效果(三)
- JQuery的动画(显示、隐藏、淡出淡入、自定义动画)
- JQuery mouse..事件+元素显示隐藏 切换 +淡入淡出+滑动效果。(可以做一个ul li下拉框滑动收起效果:slideUp)
- jQuery 淡入淡出、滑动和动画
- web server与app server
- httpclient
- udev 自动挂载U盘文件系统指定目录
- 基于深度学习的图像识别算法研究
- SurfaceView深入认识
- jQuery 隐藏、显示、淡入淡出、滑动
- 关于vimrc文件小问题记录
- vue.js--Tab选项卡
- opengles之卡通着色算法
- Day36: Prepare for interview
- Undefined symbols for architecture x86_64: "_OBJC_CLASS_$_LMZArrayDataSource", referenced from:
- Webservice 调用出现 java.net.SocketTimeoutException
- iOS----轻松掌握AFN网络顶级框架
- leetcode 278: First Bad Version