jquery动画效果学习笔记(8种效果)
1、元素的显示和隐藏
- display:none;隐藏
- display:block;显示
简单显示和隐藏方法
- a)show()显示
- b)hide()隐藏
- c)toggle()开关,显示则隐藏,隐藏则显示
<scripttype="text/javascript"> functionf1(){ //隐藏 $("div").hide();//display:none //document.getElementById('id').style.display="none"; } functionf2(){ //显示 $("div").show();//display:block } functionf3(){ $("div").toggle(); } </script> <styletype="text/css"> div{width:300px;height:200px;background-color:blue;} </style> <body> <div>duckanddog</div> <inputtype="button"value="隐藏"onclick="f1()"/> <inputtype="button"value="显示"onclick="f2()"/> <inputtype="button"value="开关效果"onclick="f3()"/> </body>
CSS支持两种方法显示和隐藏元素,即使用visibility或display样式,他们控制元素显示和隐藏的时候效果相同,但是结果却不同。
具体说明如下:
- visibility属性在隐藏元素的时候,同时会保存元素在文档流中的影响力,隐藏后元素的未知保持不变。该属性包括visible(默认)和hidden两个值。
- display隐藏后,隐藏的元素不再占用文档的位置。
2、滑动效果显示和隐藏
- slideUp(speed[,callback])向上滑动元素并最终隐藏
- slideDown(speed[,callback])向下滑动元素并最终显示
- slideToggle(speed[,callback])
speed:设置效果的速度(slow(600)normal(400)fast(200)时间(毫秒))
callback:效果执行完毕之后自动调用的回调函数
<scripttype="text/javascript"> functionf1(){ //隐藏 $("div").slideUp(3000,function(){ alert('我消失了,你能看到么'); }); } functionf2(){ //显示 $("div").slideDown(3000,function(){ alert('我又回来了'); });//display:block } functionf3(){ $("div").slideToggle(1000); } $(function(){ //气缸滑动效果 //setInterval("f3()",1000); }); </script> <styletype="text/css"> div{width:300px;height:200px;background-color:blue;} </style> <body> <div>duckanddog</div> <inputtype="button"value="隐藏"onclick="f1()"/> <inputtype="button"value="显示"onclick="f2()"/> <inputtype="button"value="开关效果"onclick="f3()"/> </body>
3、淡入淡出效果
让元素通过一定透明度变化,达到显示和隐藏的效果
- fadeIn(speed,[callback])
- fadeOut(speed,[callback])
- fadeToggle(speed,[callback])开关效果
- fadeTo(speed,opacity,[callback])把div设置一定透明度(0-1)0.3就是30%透明度
<scripttype="text/javascript"> functionf1(){ //隐藏 $("div").fadeOut(4000); } functionf2(){ //显示 $("div").fadeIn(4000); $("#two").fadeTo(2000,0.3); } functionf3(){ $("div").fadeToggle(2000); } </script> <styletype="text/css"> div{width:300px;height:200px;background-color:blue;} </style> <body> <divid="two">duckanddog</div> <inputtype="button"value="隐藏"onclick="f1()"/> <inputtype="button"value="显示"onclick="f2()"/> <inputtype="button"value="开关效果"onclick="f3()"/> </body>
设置透明度,div的透明度是30%:
4、动画效果底层方法animate()
show()hide()等等动画效果内部都是执行animate()方法
$().animate(css效果参数[,时间][,回调函数]);
css()等一般jquery方法执行完毕之后会返回当前jquery对象,因此jquery的许多方法可以链式调用。
<scripttype="text/javascript"> functionf1(){ //文字大小、文字粗体、div本身宽度和高度 //font-sizebackground-colorcolor console.log($("div")); //jquery对象调用完毕css方法本身还是一个jquery对象 //说明css方法执行完毕有returnthis关键字 console.log($("div").css('font-weight','bold').css("background-color",'pink')); varjn={'font-size':'30px',width:'400px',height:'300px'}; $("div").css('font-weight',"bold").css("background-color","pink").css("color","white").animate(jn,2000); //$("div").animate(jn,2000); } </script> <styletype="text/css"> div{width:300px;height:200px;background-color:blue;} </style> <body> <div>duckanddog</div> <inputtype="button"value="设置"onclick="f1()"/> </body>
5、累加累减动画
如果动画一次设定left:500,第一次单击div会左移500像素,第二次单击就不会动了。累加累减就是连续动的,只需要将left:”500px”改成left:”+=500px”或者left:”-=500px”即可。
(function(){ $("#panel").click(function(){ $(this).animate({left:"+=500px"},3000); }) })</span>
6、多重动画
1、同时执行多个动画
上面的例子只控制了left属性的变化,这回我们在控制left属性的时候同时控制元素高度变为200px
$(function(){ $("#panel").click(function(){ $(this).animate({left:"500px",height:"200px"},3000); }) })
2、顺序执行动画
上面例子中元素右移和放大高度两个动画是同时进行的。现在我们要实现先右移再放大高度,那很简单,只需要把上面的animate()方法拆开写成两个即可
$(function(){ $("#panel").click(function(){ $(this).animate({left:"500px"},3000) .animate({height:"200px"},1000); }) })
3、综合动画
接下来完成更复杂的动画。单击div元素后让他向右移动的同时增大他的高度,并将它的不透明度从50%切换到100%。然后再让它从上向下移动,同时它的宽度变大,当完成这
些效果后让它以淡出的方式隐藏掉。
$(function(){ $("#panel").css("opacity",0.5);//设置不透明度 $("#panel").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000) .fadeOut(1000); }) })
7、动画回调函数
在上例中,如果想在最后一步切换css样式而不是隐藏元素。这我们就可以用到animate的第三个参数回调函数了
$(function(){ $("#panel").css("opacity",0.5);//设置不透明度 $("#panel").click(function(){ $(this).animate({left:"400px",height:"200px",opacity:"1"},3000) .animate({top:"200px",width:"200px"},3000,function(){$(this).css("border","5pxsolidblue")}); }) })
这样就把css方法加入到动画队列中了。
8、停止动画和判断是否处于动画状态
1、停止元素的动画
stop([clearQueue][,gotoEnd])两个都是可选参数,都是boolean类型
参数说明:
clearQueue:代表是否清空未执行完的动画队列
gotoEnd:代表是否将正在执行的动画跳到末状态
通过一个综合的示例就可以弄明白stop()方法的这两个参数了:
<styletype="text/css"> *{margin:0;padding:0;} body{font-size:13px;line-height:130%;padding:60px} #panel{width:60px;border:1pxsolid#0050D0;height:22px;overflow:hidden;} .head{padding:5px;background:#96E555;cursor:pointer;width:300px;} .content{padding:10px;text-indent:2em;border-top:1pxsolid#0050D0;display:block;width:280px;} </style> <scriptsrc="../../../scripts/jquery.js"type="text/javascript"></script> <scripttype="text/javascript"> $(function(){ $("button:eq(0)").click(function(){ $("#panel") .animate({height:"150"},2000) .animate({width:"300"},2000) .hide(3000) .animate({height:"show",width:"show",opacity:"show"},2000) .animate({height:"500"},2000); }); $("button:eq(1)").click(function(){ $("#panel").stop();//停止当前动画,继续下一个动画 }); $("button:eq(2)").click(function(){ $("#panel").stop(true);//清除元素的所有动画 }); $("button:eq(3)").click(function(){ $("#panel").stop(false,true);//让当前动画直接到达末状态,继续下一个动画 }); $("button:eq(4)").click(function(){ $("#panel").stop(true,true);//清除元素的所有动画,让当前动画直接到达末状态 }); }) </script> <body> <button>开始一连串动画</button> <button>stop()</button> <button>stop(true)</button> <button>stop(false,true)</button> <button>stop(true,true)</button> <divid="panel"> <h5class="head">三国杀杀天下</h5> <divclass="content"> 夏侯惇的眼睛,陆逊的联营,郭嘉司马深深的基情 </div> </div> </body> </html>
2、判断元素是否处于动画状态
当使用animate()方法的时候,要避免动画的累积导致的动画与用户的行为不一致的现象。当用户快速在某个元素上执行animate()动画时,就会出现动画累积。
解决办法是判断元素是否正在处于动画状态,当不处于动画状态的时候,才为元素添加新的动画。
用法:
if(!$(element).is(":animated")){ //添加新的动画 }
通过本文对8种jquery动画效果的详细剖析,玩转jquery动画效果,希望大家喜欢这篇针对jquery动画效果进行全面介绍的文章。