jquery之效果操作
来源:互联网 发布:知之深爱之切原文阅读 编辑:程序博客网 时间:2024/06/06 07:15
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) })
阅读全文
0 0
- jquery之效果操作
- jQuery之效果
- jQuery效果之滑动
- jQuery效果之菜单
- jQuery效果之tab
- jQuery之动画效果
- jQuery之动画效果
- jQuery之动画效果
- JQuery之动画效果
- jQuery之动画效果
- jquery之效果函数
- jquery插件之日历效果
- jquery插件之放大镜效果
- jQuery学习之动画效果
- jQuery效果之淡入淡出
- jQuery效果之滑动面板
- jquery ajax之loading效果
- jQuery之淡入淡出效果
- java concurrent 探秘
- oracle 常用sql命令
- Oracle创建用户与导入导出
- iTOP-4412嵌入式开发历程
- Android Spinner getView getDropDownView 的区别
- jquery之效果操作
- 《道德经》第十八章
- 六边形溯源追踪算法编程思想与代码
- QT获取控件焦点,判断对象类型,模拟发送按键消息
- 如何给信号加噪声,matlab
- SeleniumIDE的安装、使用入门
- 分针网—每日分享:nodejs取参四种方法req.body,req.params,req.param,req.body
- Memcache服务搭建
- 海思3518C 4G模块移植及运用