标签：mat htm round 第一个 relative 多个 jquer pac fun
html:
<button>点击我</button> <p>如果你想在一个涉及动画的函数之后来执行语句，请使用callback函数</p> <div class="panel"></div> <div class="content"></div>
css部分：
注意：使用animate函数时，为了能够影响元素的 top bottom left right 属性值，需先将position属性值设置为 relative 或者 absolute
.panel {
width: 100px;
height: 100px;
border: 1px solid #0050d0;
background: red;
cursor: pointer;
position: relative;
}
.content {
width: 100px;
height: 100px;
margin-top: 20px;
background: green;
}
如果在500之前加上 += 或 -= 代表在当前位置递增或者递减
$(".panel").click(function() {
$(this).animate({left: "+=500"},3000);//递增
})
同时执行多个动画
$(this).animate({left: "500", top: "200"},3000);
按顺序执行动画 -- 动画队列
$(this).animate({left: "500"},3000);
$(this).animate({top: "200"},3000);
以上可改为 链式写法
$(this).animate({left: "500px"},3000).animate({top: "200px"}, 3000);
综合动画
透明度可以用小数，用百分数无效
$(this).animate({left: "500px", height: "200px", opacity: "0.5"},3000).animate({top: "200px", width: "200px"},3000).fadeOut("slow");
给hover 事件添加 stop() 方法 可解决移入移出动作过快 导致光标动作与动画效果不一致的问题
注意： 移入移出都需要添加stop()
$(".panel").hover(function() {
$(this).stop().animate({height: "150",width: "300"},3000)
},function(){
$(this).stop().animate({height: "22",width: "60"},3000)
})
当遇到的是组合动画的时候
$(".panel").hover(function() {
$(this).stop()
.animate({height: "150"},3000)//如果此时光标移出
.animate({width: "300"},3000)//执行这个动画 而不是下面移出的动画
},function(){
$(this).stop()
.animate({height: "22"},3000)
.animate({width: "60"},3000)
})
把stop()第一个参数设置为true ，可以解决上面的问题，跳过width为300的样式改变 执行鼠标移出事件
$(".panel").hover(function() {
$(this).stop(true)
.animate({height: "150"},3000)//如果此时光标移出
.animate({width: "300"},3000)//执行下面移出的动画
},function(){
$(this).stop(true)
.animate({height: "22"},3000)
.animate({width: "60"},3000)
})
如果stop()第二个参数也设置为true的时候,可以直接到达结束时候的状态
标签：mat htm round 第一个 relative 多个 jquer pac fun
原文地址：http://www.cnblogs.com/yigexiaojiangshi/p/7464565.html
