今日主打：动画DOM及其CSS操作、自定义动画、动画函数、计时器
动画原理：
固定的时间间隔（例如0.1s），每次dom元素css样式修改一点（如高和宽各增加10%），视觉效果就像动画了
//需要传递的参数是DOM元素最终的css状态和时间
//demo1
var div = $('#test-animate');
div.animate({opacity:025,
width:'256px',
height:'256px'},3000);
//demo2
<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("div").animate({left:'250px'});
});
});
</script>
</head>
<body>
<button>开始动画</button>
<p>默认情况下，所有 HTML 元素的位置都是静态的，并且无法移动。如需对位置进行操作，记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute。</p>
<div style="background:#98bf21;height:100px;width:100px;position:absolute;">
</div>
</body>
</html>
！！！但是由于加了动画效果之后，比如电子相册再左右移动时，停止移动了事件冒泡而失去控制，需要用stop()来清除事件冒泡
var swiper = function(){
$('img').eq(index).stop.animate({'opacity':'1'},1000).siblings().stop.animate({'opacity':'0'},1000);
}
delay()；可以实现动画暂停;传递的数值是时间
var swiper = function(){
$('div').stop()
.animate({'width':'0%'},1000)
.delay(3000)
.animate({'width':'100%'},1000)
}
动画函数
show()、hide():直接以无参形式调用show()和hide(),会直接隐藏和显示DOM元素，但只要传递参数，就成了动画；toggle():根据当前的状态决定是show（）还是hide（）；
fadeIn、fadeOut（）、fadeToggle（）也是同理的（逐渐进入和逐渐退出）
slideUp（）、slideDown（）、slideToggle（）也是一样的道理(垂直方向上逐渐展开或收缩)
计时器 推荐食用原生js的计时器
原生js计时器讲解
setTimeout（):只执行一次
setInterval()隔间一段时间执行一次
插件与封装
//例如在电子相册中时;对于需要食用同样的结构时，无论里面有多少a或者img，都可以直接封块食用
var alink = $('.container').find('a');
var imgs = $('.container').find('img');
扫一扫
1280
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
