JQuery效果
来源:互联网 发布:windows 安装xcode教程 编辑:程序博客网 时间:2024/06/14 02:27
JQuery效果
JQuery动画有四种效果:显示与隐藏、淡入与淡出、上滑与下滑、自定义动画。
1显示、隐藏
Heid():隐藏
<body>
<div id="div1">
</div>
<button id="btnHide">消失</button>
</body>
<script type="text/javascript">
$("#btnHide").click(function() {
$("#div1").hide(10000);
});
</script>
将高度、宽度、透明度改变为0,display为“none”
Show():显示
<body>
<div id="div1">
</div>
<button id="btnShow">显示</button>
</body>
<script type="text/javascript">
$("#btnShow").click(function() {
$("#div1").show(10000);
});
</script>
将高度、宽度、透明度显示为初始的css设置的样式,display为“block”
Toggle():切换
<body>
<div id="div1">
</div>
<button id="btnToggle">切换</button>
</body>
<script type="text/javascript">
$("#btnToggle").click(function() {
$("#div1").toggle();
});
</script>
如果display为none时,点击就会变成black,如果display为black时,点击后则为none。
2淡入、淡出
fadeIn():淡入
<body>
<div id="div1">
</div>
<button id="btnFadeIn">淡入</button>
</body>
<script type="text/javascript">
$("#btnFadeIn").click(function() {
$("#div1").fadeIn(5000);
});
</script>
将隐藏的样式通过改变其透明度(透明度从0到1),让他显示出来。
fadeOut():淡出
<body>
<div id="div1">
</div>
<button id="btnFadeOut">淡出</button>
</body>
<script type="text/javascript">
$("#btnFadeOut").click(function() {
$("#div1").fadeOut(5000);
});
</script>
将显示的样式改变其透明度(透明度从1到0),让他隐藏起来。
fadeToggle():淡入、淡出的切换
<body>
<div id="div1">
</div>
<button id="btnFadeToggle">切换</button>
</body>
<script type="text/javascript">
$("#btnFadeToggle").click(function() {
$("#div1").fadeToggle(500);
});
</script>
如果样式是隐藏的,则将它显示出来;如果样式是显示的,则将它隐藏起来。
fadeTo():固定其透明度(透明度在0到1之间)
<body>
<div id="div1">
</div>
<button id="btnFadeTo">固定透明度</button>
</body>
<script type="text/javascript">
$("#btnFadeTo").click(function() {
$("#div1").fadeTo(5000,0.8);
});
</script>
3上滑、下滑
slideUp():上滑
<body>
<div id="div1"></div>
<button id="btnSlideUp">上滑</button>
</body>
<script type="text/javascript">
$("#btnSlideUp").click(function() {
$("#div1").slideUp(5000);
});
</script>
将设置的高从初始边为0,然后隐藏它。
slideDown():下滑
<body>
<div id="div1"></div>
<button id="btnSlideDown">下滑</button>
</body>
<script type="text/javascript">
$("#btnSlideDown").click(function() {
$("#div1").slideDown(5000);
});
</script>
先显示它,然后将设置的高度从0到初始。
slideToggle():上滑与下滑切换
<body>
<div id="div1"></div>
<button id="btnSlideToggle">切换</button>
</body>
<script type="text/javascript">
$("#btnSlideToggle").click(function() {
$("#div1").slideToggle(5000);
});
</script>
如果元素是隐藏的,则先让它显示,然后把它的高度增加,如果元素是显示的话,先将高度减为0,,再让他隐藏
4动画
自定义动画:移动一个块到另一个位置
<body>
<button>开始动画</button>
<div id="p">
</div>
</body>
<script type="text/javascript">
$("button").click(function() {
//设置多个css属性
$("#p").animate({left:'300px',top:'300px'});
</script>
同时使用多个属性实现动画效果(移动位置和大小还有颜色)
<body>
<button>开始动画</button>
<div id="p">
</div>
</body>
<script type="text/javascript">
var p = $("#p");
//设置相关属性
$("#p").animate({
left:'300px',
width:'+=100px',
height:'+=100px',
opacity:'0.5'
});
});
</script>
改变预定义值来实现我们所需内容的显示或隐藏
//预定义值
$("#p").animate({
height:'toggle'
});
Animate()中有三个参数
第一个参数是需要改变样式
第二个参数是显示的速度(slow,fast 指定秒数)
第三个参数回调元素
<body>
<button id="star">开始</button>
<button id="end">结束</button>
<div id="div1">
</div>
</body>
<script type="text/javascript">
var div = $("#div1");
$("#star").click(function() {
div.animate({height:'450px'},"slow");
div.animate({width:'450px'},"slow");
div.animate({height:'200px'},"slow");
div.animate({width:'200px'},"slow");
});
$("#end").click(function (){
div.stop(true);
});
</script>
- jQuery 效果
- JQuery效果
- jQuery 效果
- jQuery 效果
- jquery效果
- Jquery效果
- jquery效果
- jQuery效果
- jquery效果
- jQuery-----效果
- jQuery--效果
- jQuery 效果
- JQuery效果
- jquery效果
- jquery效果
- jQuery效果
- jQuery效果
- jQuery效果
- 利用jQuery提取和修改文本内容进而对文本内容进行对调
- 2017.8.16File和IO流的小案列
- Windows上安装多个MySQL实例
- Ceph (分布式文件系统)
- Python pyspider 安装与开发
- JQuery效果
- 知识储备:02数组与字符串:利用哈希表实现动态规划
- 浅析Android恶意应用
- 通过RMAN备份恢复数据库到其他服务器
- highcharts 动态页面显示!
- I
- 多线程
- 前端算法之快速排序(JS版)
- 关于获取日期的一些问题