jQuery animate(滑块滑动效果代码)
更新时间：2010年01月01日 01:08:59 作者：
jQuery animate 滑块滑动效果,学习jquery的朋友可以看下。
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;
});
});
[Ctrl+A 全选 注:引入外部Js需再刷新一下页面才能执行]
相关文章
Jsonp(JSON with Padding) 是 json 的一种"使用模式"，可以让网页从别的域名（网站）那获取资料，即跨域读取数据，本文给大家简单介绍jsonp 使用小结 ，需要的朋友参考下2016-01-01
这篇文章主要为大家详细介绍了jQuery实现图片切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-10-10
在Web的世界里，按钮对于我们来说再也普通不过了，当然也用得比较多。今天这篇文章我主要向大家分享20个基于jQuery和CSS技术的按钮，这些基于jQuery的按钮都非同凡响，所以我在标题里用了“令人惊叹”这一个词2012-01-01
这篇文章介绍了jquery弹出关闭遮罩层实例，有需要的朋友可以参考一下2013-08-08
今天小编就为大家分享一篇JQuery通过后台获取数据遍历到前台的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-08-08
jquery动态添加以及遍历option并获取特定样式名称的option方法
下面小编就为大家分享一篇jquery动态添加以及遍历option并获取特定样式名称的option方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-01-01
这篇文章主要介绍了jQuery使用fadeout实现元素渐隐效果的方法,实例分析了jQuery中fadeout方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-03-03
一般的select下拉框是不能输入的，只能供大家选择，今天小编给大家分享基于jQuery实现select下拉选择可输入附源码下载，需要的朋友参考下2016-02-02
隐藏模态窗口技术是一种很好的解决方案，用于处理不是特有必要出现在网页上的界面元素，下面与大家分享下如何利用jQuery插件leanModal建立一个常规模态窗口2013-08-08
这篇文章主要详细介绍了一些jQuery功能函数，例如浏览器检测，字符串处理、数组的编辑等,需要的朋友可以参考下2015-02-02
最新评论