/**
* 【JQ基础动画】
* show() 显示
* hide() 隐藏
* toggle() 切换
* 默认无动画，如果要产生动画
* 在括号内，添加毫秒数，可产生动画和控制动画的快慢
*
* 《滑动动画》
* slideDown() 滑动显示(下)
* slideUp() 滑动隐藏(上)
* slideToggle 滑动切换
* 默认有动画，默认是400毫秒
* 《淡入淡出动画》
* fadeIn() 淡入显示
* fadeOut() 淡出显示
* fadeToggle() 切淡
* fadeTo(时间,透明度) 设置透明度
*/
一.基础动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button:eq(0)').click(function () {
$('img').show(1000);
}); $('button:eq(1)').click(function () {
$('img').hide(1000);
}); $('button:eq(2)').click(function () {
$('img').toggle(1000);
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button><br/>
<img src="data:images/1.gif" alt="">
</body>
</html>
二.滑动动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button').eq(0).click(function () {
$('.box').slideDown();
});
$('button').eq(1).click(function () {
$('.box').slideUp();
});
$('button').eq(2).click(function () {
$('.box').slideToggle();
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<br>
<!--<img src="data:images/1.gif" alt="" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
三.淡入淡出动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box{
width: 200px;
height: 400px;
background-color: pink;
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
$('button').eq(0).click(function () {
$('.box').fadeIn();
});
$('button').eq(1).click(function () {
$('.box').fadeOut();
});
$('button').eq(2).click(function () {
$('.box').fadeToggle(1000);
});
$('button').eq(3).click(function () {
$('.box').fadeTo(400,0.3);
});
});
</script>
</head>
<body>
<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<button>透明度</button>
<br>
<!--<img src="data:images/1.gif" alt="" width="150" height="440">-->
<div class="box"></div>
</body>
</html>
四.自定义动画
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.main{
width: 100px;
height: 100px;
background-color: pink;
/*transition: all .4s;*/
}
</style>
<script src="lib/jquery-1.12.2.js"></script>
<script>
$(function () {
/**
* 自定义动画(兼容IE678.)
* 其实JQ的动画也可以通过CSS3实现，但是CSS3会有兼容问题
* 移动端项目的时候，直接使用CSS3实现效果即可
* PC端要考虑低版本浏览器兼容，可以使用JQ的animate函数
*
* 有动画的属性：
* 值是数字的属性：（颜色，文本居中这些就实现不了）
* 核心函数
* .animate({属性集合})
*
* */ //（颜色，文本居中这些就实现不了动画）
$('button').click(function () {
$('.main').animate({
"width":"300px",
"height":"300px",
"backgroundColor":"#f90",
"textAlign":"center",
"lineHeight":"300px"
},300);
});
});
</script>
</head>
<body>
<button>动起来</button>
<div class="main">
文字行号
</div>
</body>
</html>
