1、元素的显示和隐藏
- display:none; 隐藏
- display:block; 显示
显示
$("div").show();//display:block
}
function f3(){
$("div").toggle();
}
@H_403_18@
duck and dog
3、淡入淡出效果
- fadeIn(speed,[callback])
- fadeOut(speed,[callback])
- fadeToggle(speed,[callback])开关效果
- fadeTo(speed,opacity,[callback]) 把div设置一定透明度（0-1）0.3就是30%透明度
<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
function f1(){
//隐藏
$("div").fadeOut(4000);
}
function f2(){
//显示
$("div").fadeIn(4000);
$("#two").fadeTo(2000,0.3);
}
function f3(){
$("div").fadeToggle(2000);
}
@H_403_18@
<style type="text/css">
div {width:300px; height:200px; background-color:blue;}
设置透明度，div的透明度是30%：
4、动画效果底层方法animate()
show() hide() 等等动画效果内部都是执行animate()方法
效果参数[，时间][，回调函数]);
css()等一般jquery方法执行完毕之后会返回当前jquery对象，因此jquery的许多方法可以链式调用。
<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
function f1(){
//文字大小、文字粗体、div本身宽度和高度
//font-size background-color color
console.log($("div"));
//jquery对象<a href="/tag/diaoyong/" target="_blank" class="keywords">调用</a>完毕css<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>本身还是一个jquery对象
//说明css<a href="/tag/fangfa/" target="_blank" class="keywords">方法</a>执行完毕有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);}
@H_403_18@
<style type="text/css">
div {width:300px; height:200px; background-color:blue; }
duck and dog
