jQuery学习笔录6（动画）
在这里介绍几个jquery动画的应用
一 show() & hide()
一秒=1000毫秒
show(1000),hide(1000)
他俩一组合就是1秒钟show，一秒钟隐藏
eg:
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Untitled Page</title>
<script src="../scriptJquery/jquery-1.3.2.min.js"></script>
<style>
#img1
{
display:block;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" id="btn" value="click" />
<img src="../image/iphone.jpg" id="img1"/>
</div>
</form>
</body>
</html>
<script>
//$("#img1").show(6000);//一秒=1000毫秒
$("#btn").toggle(function(){
console.info("1")
$("#img1").hide(3000);
},function(){
console.info("2")
$("#img1").show(1000);
});
</script>二
fadeln() &
fadeOut()
这2个方法只改变元素的不透明度。
fadeOut()方法会在指定的一段时间内降低元素的不透明度，直到元素完全消失。
fadeIn()方法则相反。
有些时候只想让内容变为“透明”，而不想改变其高度和宽度，就可以使用fadeOut().fadeOut：图片or文字消失
$("#btn").toggle(function(){
$("#img1").fadeOut();
},function(){
$("#img1").fadeIn();
})
三 slideUp() & slideDown()
--只改变元素的高度
当一个元素display属性是none，调用sildeDown()方法，这个元素由上至下延伸显示；
sildeUp()方法正好相反，由下至上缩短隐藏。
$("#btn").toggle(function(){
$("#img1").slideUp(1000);
},function(){
$("#img1").slideDown(1000);//sildeDown("slow"):slow=0.6s,normal=0.4s,fast=0.2s
})四
1 自定义动画方法 animate()
animate(params [,speed] [,callback]);
params:{property1:"value1",property:"value2"}。
speed:速度。
callback:在动画完成时执行的函数。
$("#p1").animate({left:"500px"},3000);//在3秒内 向右移动500px
2 累加、累减
$("#p1").animate({left:"+=500px"},3000);//在3秒内 向右移动500px，再移动500px
3 多重动画
1）$("#p1").animate({left:"+=500px",height:"200px"},3000); --向右滑动，同时panel增高
2）$("#p1").animate({left:"+=500px"},3000); --先滑动
$("#p1").animate({height:"200px"},3000); --后增高
3）综合例子：单击panel元素，1 右移动同时增大高度，并将他的不透明度从50%变到100% 2 再让他从上到下移动同时增大宽度，3最后 以淡出方式隐藏
$("#p1").css("opacity","0.5");//设置不透明度
$("#p1").click(function(){
$(this).animate({left:"500px",height:"500px",opacity:"1"},3000)
.animate({top:"200px",width:"20px"},2000).fadeOut("slow");
});
如果在最后要把panel的样式做更改的话，css("border","5px solid blue"),样式从执行动画时就被执行了
但是呢，如果我们就是想更改CSS样式，而不是改变元素的不透明度。那么可以将CSS样式写在回调函数中~~~
$("#p1").css("opacity","0.5");//设置不透明度
$("#p1").click(function(){
$(this).animate({left:"500px",height:"500px",opacity:"1"},3000)
.animate({top:"200px",width:"20px"},2000,function(){$(this).css("border","5px solid blue");});//回调函数。 $("#p1").slideDown(1000)
//加this ：$(this).function(){$(this).css("border","5px solid blue");}); //报错
//提示错误 missing) after argument list.修改：加上click 事件，click响应function
//$(this).click(function(){$(this).css("border","5px solid blue");})) //正确的
});五 停止动画和判断是否处于动画状态
停止动画 ： stop()
❀ 鉴于之后的例子中有hover() ,因此这里特别把hover提出来，说说。
hover(over,out)一个模仿悬停事件（鼠标移动到一个对象上面及移出这个对象）的方法。这是一个自定义的方法，它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时，会触发指定的第一个函数。当鼠标移出这个元素时，会触发指定的第二个函数。而且，会伴随着对鼠标是否仍然处在特定元素中的检测（例如，处在div中的图像），如果是，则会继续保持“悬停”状态，而不触发移出事件（修正了使用mouseout事件的一个常见错误）。
参数 :
over (Function) : 鼠标移到元素上要触发的函数
out (Function): 鼠标移出元素要触发的函数
示例 :
鼠标悬停的panel上 打出1 or 2.
jQuery 代码:
$("#p1").hover(function () {
console.info(1);
},
function () {
console.info(2)
}
);
❀ stop()
1 语法结构 stop([clearQueue] [,gotoEnd])
这2个参数皆为可选参数，值为Boolean类型。
clearQueue ：规定是否停止被选元素的所有加入队列的动画。
gotoEnd ：规定是否允许完成当前的动画。该参数只能在设置了 stopAll 参数时使用。
$("#p1").hover(function(){
$(this).stop(true).animate({height:"150px"},200)
.animate({width:"300px"},300);
},function(){
$(this).stop(true).animate({height:"40"},300)
.animate({width:"60"},300);
})