<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#d1
{
background-color:Red;
width:400px;
height:400px;
}
</style>
<script src="Scripts/jquery-1.4.1-vsdoc.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
//往右下方放
$("#btn1").click(function () {
$("#d1").show(3000);
});
//往左上收
$("#btn2").click(function () {
$("#d1").hide("slow");
});
//来回显示和回收
$("#btn3").click(function () {
$("#d1").toggle(1000);
})
//暂停
$("#btn4").click(function () {
$("#d1").stop();
})
//垂直往上
$("#btn5").click(function () {
$("#d1").slideUp(3000);
})
//垂直向下
$("#btn6").click(function () {
$("#d1").slideDown(3000);
})
//模仿QQ效果
$("#d1").click(function () {
$("#d1").slideUp(3000);
})
//颜色变暗，退出
$("#btn7").click(function () {
$("#d1").fadeOut(3000);
})
//颜色变亮，显示
$("#btn8").click(function () {
$("#d1").fadeIn(3000);
})
})
</script>
</head>
<body>
<div id="d1">
</div>
<input id="btn1" type="button" value="show"/><br />
<input id="btn2" type="button" value="hide"/><br />
<input id="btn3" type="button" value="toggle"/><br />
<input id="btn4" type="button" value="stop"/><br />
<input id="btn5" type="button" value="slideUp"/><br />
<input id="btn6" type="button" value="slideDown"/><br />
<input id="btn7" type="button" value="fadeOut"/><br />
<input id="btn8" type="button" value="fadeIn"/><br />
</body>
</html>
jQuery各种动画效果
2013-03-31
858
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《
阿里云开发者社区用户服务协议》和
《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写
侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：
#d1
{
background-color:Red;
width:400px;
height:400px;
}
$(function () {
//往右下方放
$("#btn1").
目录
相关文章
|
22天前
|
JavaScript
前端开发
UED
|
27天前
|
JavaScript
|
3月前
|
机器学习/深度学习
JavaScript
|
7月前
|
JavaScript
|
7月前
|
JavaScript
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
jQuery 滑入滑出动画 slideDown()； slideUp()； slideToggle()；
47
0
0
|
7月前
|
JavaScript
|
7月前
|
JavaScript
|
7月前
|
JavaScript
|
7月前
|
JavaScript
jQuery 淡入淡出动画 fadeIn()； fadeOut()； fadeToggle()； fadeTo()；
jQuery 淡入淡出动画 fadeIn()； fadeOut()； fadeToggle()； fadeTo()；
42
0
0
|
3月前
|
JavaScript
前端开发
热门文章
最新文章
1
jQuery+CSS3自动轮播焦点图特效源码
2
Jquery $.getJSON()设置同步
3
Jquery真的不难~第八回 JS的闭包问题
4
不懂JQuery的孩子：自封装Ajax函数
5
读[JQuery实现的后台框架（动易+Slashdot Menu）]有感
6
jquery.lazyload.js实现图片懒加载
7
FancySelect – 更好用的 jQuery 下拉选择框插件
8
使用 jQuery Deferred 和 Promise 创建响应式应用程序
9
javascriptMVC教程 -- 14.FuncUnit实例：完成jquery焦点图插件的自动化功能测试
10
jQuery EasyUI API 中文文档 - 菜单按钮（MenuButton）
1
jQuery模态框弹窗提示代码
16
2
使用JavaScript、jQuery和Bootstrap构建待办事项应用
11
3
jQuery实现二级菜单
11
4
jQuery选择器 获取元素的十一种方式
15
5
jQuery幸运大转盘抽奖活动代码
32
6
JQuery样式操作、click事件以及索引值-选项卡应用示例
20
7
jquery+css实现Tab栏切换的代码实例
17
8
jquery实现二级导航下拉菜单效果实例
19
9
目前最流行的一些前端框架：React、Angular、Vue.js和jQuery
90
10
jQuery 的属性拷贝(extend)的实现原理是什么，如何实现深拷贝？
17
