jQuery animate(滑块滑动效果代码)
2010-01-01 00:00
771 查看
HTML
<p><a href="#" class="run">Run</a></p> <div id="box"> </div> <p><a href="#" class="run">Run</a></p><div id="box"></div>
CSS
<style type="text/css"> body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif; } a {}{ font-weight: bold; color: #000000; } #box {}{ background: #6699FF; height: 100px; width: 100px; position: relative; } </style> <style type="text/css">body {}{ margin: 20px auto; padding: 0; width: 580px; font: 80%/120% Arial, Helvetica, sans-serif;}a {}{ font-weight: bold; color: #000000;}#box {}{ background: #6699FF; height: 100px; width: 100px; position: relative;}</style>
JavaScript
$(document).ready(function(){ $(".run").click(function(){ $("#box").animate({opacity: "0.1", left: "+=400"}, 1200) .animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow") .animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow") .animate({top: "0"}, "fast") .slideUp() .slideDown("slow") return false; }); });
Chainable Transition Effects
$(document).ready(function(){
$(".run").click(function(){
$("#box").animate({opacity: "0.1", left: "+=400"}, 1200)
.animate({opacity: "0.4", top: "+=160", height: "20", width: "20"}, "slow")
.animate({opacity: "1", left: "0", height: "100", width: "100"}, "slow")
.animate({top: "0"}, "fast")
.slideUp()
.slideDown("slow")
return false;
});
});
body {
margin: 20px auto;
padding: 0;
width: 580px;
font: 80%/120% Arial, Helvetica, sans-serif;
}
a {
font-weight: bold;
color: #000000;
}
#box {
background: #6699FF;
height: 100px;
width: 100px;
position: relative;
}
Run
[Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]
相关文章推荐
- jQuery animate(滑块滑动效果代码)
- js实现鼠标点击左上角滑动菜单效果代码
- jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
- JS特效代码大全(五)js滑动条(拖动条)效果
- Android 仿ios 可滑动切换效果按钮 实例代码
- 8行代码教你搞定导航控制器全屏滑动返回效果
- Android 滑动效果代码分享
- iOS滑动解锁、滑动获取验证码效果的实现代码
- android ViewPager实现滑动翻页效果实例代码
- 代码积累2----tab页面滑动效果
- jquery 滑动选项卡实例效果代码
- jquery左右全屏大尺寸多图滑动效果代码分享
- 纯CSS3代码实现滑动开关效果
- 代码积累2----tab页面滑动效果
- jQuery层动画定位滑动效果代码
- jQuery实现右侧显示可向左滑动展示的深色QQ客服效果代码
- 百度应用jQuery图文列表滑动切换效果代码
- js滑动提示效果代码分享
- Javascript实现滑块滑动改变值的实现代码