jQuery动画

通过 jQuery 动画方法，能够很轻松地为网页添加非常精彩的视觉效果，给用户一种全新体验。

动画分类

显示、隐藏
滑动、卷动
淡入、淡出
自定义动画

HTML DOM position 属性

position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。

值	描述
static	默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何 top、bottom、left 或 right 声明）。
relative	位置被设置为 relative 的元素，可将其移至相对于其正常位置（原来位置）的地方，因此 “left:20” 会将元素移至元素正常位置左边 20 个像素的位置。
absolute	位置设置为 absolute 的元素，可定位于相对于包含它的元素（父级元素）的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及 “bottom” 属性来规定。
fixed	位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于 IE7（strict 模式）。

显示 show(毫秒, 完成回调函数)

show() 具体用法(来自jQuery文档)

$('#show').click(function () { /*点击显示按钮，显示广告*/$('.ad').show(1000,function () {console.log('显示完成!');});
});

隐藏 hide(毫秒, 完成回调函数)

hide() 具体用法(来自jQuery文档)

$('#hide').click(function () { /*点击隐藏按钮，隐藏广告*/$('.ad').hide(1000,function () {console.log('隐藏完成！')});
});

切换 toggle(毫秒, 完成回调函数)

toggle() 具体用法(来自jQuery文档)

$('#toggle').click(function () { /*点击切换按钮，进行切换*/$('.ad').toggle(1000,function () {console.log('切换完成！')})
});

案例：两侧浮动广告显示或者隐藏控制

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title><style>.ad{background: url("images/ad.png") no-repeat;width: 150px;height: 300px;position: fixed;top: 50%;margin-top: -150px;}.left{left: 0;}.right{right: 0;}.close{width: 16px;height: 16px;position: absolute; /*绝对定位是相对父级元素*/right: 10px;top: 10px;}</style>
</head>
<body><div class="ad left"><img class="close" src="data:images/close.png" alt=""></div><div class="ad right"><img class="close" src="data:images/close.png" alt=""></div><button id="show">显示</button><button id="hide">隐藏</button><button id="toggle">切换</button>
<script type="text/javascript" src="lib/jquery-3.3.1.js"></script>
<script type="text/javascript">$(function () {$('#show').click(function () { /*点击显示按钮，显示广告*/$('.ad').show(1000,function () {console.log('显示完成!');});});$('#hide').click(function () { /*点击隐藏按钮，隐藏广告*/$('.ad').hide(1000,function () {console.log('隐藏完成！')});});$('#toggle').click(function () { /*点击切换按钮，进行切换*/$('.ad').toggle(1000,function () {console.log('切换完成！')})});$('.close').click(function () { /*点击X让div隐藏，即让父元素隐藏*/$(this).parent().hide(1000,function () {console.log('隐藏完成！')})})});</script>
</body>
</html>

运行效果：
点击显示则双方的广告显示；
点击因此则双方的广告隐藏；
点击切换则切换双方广告的状态（隐藏/显示）；
点击广告上的 x 则该广告隐藏。

【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例相关推荐

jquery显示隐藏切换_jQuery显示，隐藏，切换
jquery显示隐藏切换 Earlier we looked into how we can use jQuery get attribute, today we will look into thr ...
【jQuery笔记Part2】05-jQuery自定义动画
jQuery自定义动画简介 animate() 使用操作多个属性使用相对值使用预定义的值通过连缀或者顺序来实现列队动画顺序写法连缀写法停止动画延时动画 jQuery笔记目录简介 j ...
【jQuery笔记Part2】02-jQuery展开收起动画帷幔效果案例下拉菜单案例显示隐藏更多案例折叠菜单案例
展开&收起动画&案例 HTML DOM overflow 属性展开 slideDown(毫秒, 完成回调函数) 收起 slideUp(毫秒, 完成回调函数) 切换 slideTogg ...
【jQuery笔记Part2】04-jQuery淡入淡出动画右下角广告案例
jQuery淡入淡出动画-右下角广告 CSS display 属性淡入淡出动画案例 jQuery笔记目录 CSS display 属性 display 属性规定元素应该生成的框的类型. 值描述 n ...
【jQuery笔记Part2】03-jQuery-addBack()与end()的区别-children()与find()的区别
前几章的方法对比与总结示例页面:3层div css():指定元素修改属性 parrent():返回父节点(被包装成jQuery对象) addBack():额外添加调用链上一级 end():选择调用链 ...
div元素显示隐藏切换，点击空白位置消失
HTML <div class="clickthis" onclick="showHide()">举例点击这个</div> <di ...
javascript和jquery实现页面元素显示/隐藏切换的方法
一.javascript实现方法一: document.getElementById("idname").style.visibility="hidden"; ...
jQuery笔记——工具函数——jQuery标志
jQuery定义了很多工具函数,这些函数的命名空间为$,但不操作包装集,用户可以把它看作是顶层函数,不同之处是他们定义在$实例上,而不是定义在window实例上,类似于静态类型函数. 通常来说,工具函 ...
jQuery 笔记目录
jQuery笔记目录 part1 part2 part3 part4 Zepto.js 这是早期的笔记,当时写笔记还没有那么有规划,所以写的比较随意,每篇文章内容相对比较少,现在复习一下jQuery, ...

【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例

jQuery动画

jQuery动画

动画分类

HTML DOM position 属性

显示 show(毫秒, 完成回调函数)

隐藏 hide(毫秒, 完成回调函数)

切换 toggle(毫秒, 完成回调函数)

案例：两侧浮动广告显示或者隐藏控制

【jQuery笔记Part2】01-jQuery显示隐藏切换动画侧边广告案例相关推荐

最新文章

热门文章