jquery之效果操作
2017-05-18 09:49
190 查看
html代码
<div></div><p>123</p><input type="button" id="btn" value="显示"><input type="button" id="btn1" value="隐藏"><input type="button" id="btn2" value="切换">
css代码
div{ width: 100px; height: 100px; background: red; display: none; }
jquery代码
$("#btn").click(function(){ //显示div 3秒执行完 $("div").show(3000); }) $("#btn1").click(function(){ //隐藏div 3秒执行完 $("div").hide(3000); }) $("#btn2").click(function(){ //切换显示隐藏div 2秒执行完 $("div").toggle(2000); })
效果如下图
二.滑动又分为
show()
hide()
toggle()
html和css代码都一样
jquery代码
$("#btn").click(function(){ //展开div $("div").slideDown(); }) $("#btn1").click(function(){ //收缩div $("div").slideUp(); }) $("#btn2").click(function(){ //切换展开收缩div $("div").slideToggle(); })
效果图
三.淡入淡出又分为
fadeIn()
fadeOut()
fadeTo()
fadeToggle
css代码
div{ width: 200px; height: 400px; background: red; display: none; position:absolute; top:0; left:0; } input{ margin-top:420px; }
jquery代码
$("#btn").click(function(){ //渐渐淡入 $("div").fadeIn(2000); //两秒以后开始执行动画 $("div").fadeTo("slow",2000); }) /$("#btn1").click(function(){ //渐渐淡出 $("div").fadeOut(2000); }) $("#btn2").click(function(){ //切换淡入淡出div $("div").fadeToggle(2000); })
效果图
四.自定义(这个效果是最常用的一个效果,各种效果都能实现)
animate()
stop()
delay()
css代码
div{ width: 200px; height: 400px; background: red; position:absolute; top:0; left:0; } input{ margin-left:700px; }
jquery代码
$("#btn").click(function(){ //设置动画效果 $("div").animate({ "width":"400px", "height":"600px", "left":"100px" },2000) }) $("#btn1").click(function(){ //终止进行中的动画效果 $("div").stop().animate() }) $("#btn2").click(function(){ //延时动画效果 $("div").delay(500).animate({ "width":"400px", "height":"600px", "left":"100px" },2000) })
效果图
五.设置
$.fx.off()
$.fx.interval()//相当于定时器
jquery代码
//暂停一切动画效果 $.fx.off=true; $("#btn").click(function(){ //设置动画效果 $("div").animate({ "width":"400px", "height":"600px", "left":"100px" },2000) })
相关文章推荐
- [jQuery]仿IPhone的滑动操作效果
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- jQuery第三天动画效果 、 jQuery类数组操作小结(初级)
- JQuery操作html实现<li>标签上移和下移效果
- Jquery中的DOM操作 (十一.图片放大提示效果)
- 【jQuery】仿IPhone的滑动操作效果
- jquery实现的用户注册表单提示操作效果代码分享
- jQuery 效果函数,jquery文档操作,jQuery属性操作方法,jQuerycss操作函数,jQuery参考手册-事件,jQuery选择器
- jQuery操作之效果详解
- jquery中dom操作和事件的实例学习 仿yahoo邮箱登录框的提示效果
- jQuery中实现动画效果的基本操作介绍
- jQuery实现动画效果基本操作
- jquery实现的用户注册表单提示操作效果代码分享
- 一个页面温习jQuery效果及jQuery文档操作里的常用API
- Jquery操作Cookie|多个输入框同时输入效果|下拉列表经典例子
- jQuery 效果——为操作添加艺术性
- JQuery对class属性的操作实现按钮开关效果
- jQuery的DOM操作实例(2)——拖拽效果&&拓展插件
- 3.29 学前端 jquery之操作元素之动画效果