1、元素的显示和隐藏
display:none; 隐藏
display:block; 显示
简单显示和隐藏方法
a) show() 显示
b) hide() 隐藏
c) toggle() 开关，显示则隐藏，隐藏则显示
<script type="text/javascript"> function f1(){ //隐藏 $("div").hide();//display:none //document.getElementById('id').style.display="none"; } function f2(){ //显示 $("div").show();//display:block } function f3(){ $("div").toggle(); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style> <body> <div>duck and dog</div> <input type="button" value="隐藏" /> <input type="button" value="显示" /> <input type="button" value="开关效果" /> </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: 效果执行完毕之后自动调用的回调函数
<script type="text/javascript"> function f1(){ //隐藏 $("div").slideUp(3000,function(){ alert('我消失了，你能看到么'); }); } function f2(){ //显示 $("div").slideDown(3000,function(){ alert('我又回来了'); });//display:block } function f3(){ $("div").slideToggle(1000); } $(function(){ //气缸滑动效果 //setInterval("f3()",1000); }); </script> <style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style> <body> <div>duck and dog</div> <input type="button" value="隐藏" /> <input type="button" value="显示" /> <input type="button" value="开关效果" /> </body>
3、淡入淡出效果
让元素通过一定透明度变化，达到显示和隐藏的效果
fadeIn(speed, [callback])
fadeOut(speed, [callback])
fadeToggle(speed, [callback])开关效果
fadeTo(speed, opacity, [callback]) 把div设置一定透明度（0-1）0.3就是30%透明度
<script type="text/javascript"> function f1(){ //隐藏 $("div").fadeOut(4000); } function f2(){ //显示 $("div").fadeIn(4000); $("#two").fadeTo(2000,0.3); } function f3(){ $("div").fadeToggle(2000); } </script> <style type="text/css"> div {width:300px; height:200px; background-color:blue;} </style> <body> <div id = "two">duck and dog</div> <input type="button" value="隐藏" /> <input type="button" value="显示" /> <input type="button" value="开关效果" /> </body>
设置透明度，div的透明度是30%：
4、动画效果底层方法animate()
show() hide() 等等动画效果内部都是执行animate()方法
$().animate(css效果参数[，时间][，回调函数]);
css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。
<script type="text/javascript"> function f1(){ //文字大小、文字粗体、div本身宽度和高度 //font-size background-color color console.log($("div")); //jquery对象调用完毕css方法本身还是一个jquery对象 //说明css方法执行完毕有return this关键字 console.log($("div").css('font-weight','bold').css("background-color",'pink')); var jn = {'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> <style type="text/css"> div {width:300px; height:200px; background-color:blue; } </style> <body> <div>duck and dog</div> <input type="button" value="设置" /> </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、顺序执行动画