您的位置：首页 > Web前端 > JQuery

jQuery学习笔录6（动画）

2012-06-06 09:33 253 查看

在这里介绍几个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);
})

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： jquery function border callback server css

相关文章推荐

新的分享

章节导航