jQuery,“一个优秀的JS库,大型开发必备”,可以简化js脚本的复杂操作,操作简单,而且提供了大量实用的方法。example:fade-in fade-out.
section 01:fadeIn(),fadeOut(),fadeToggle() and fadeTo()
功能:"fade-in fade-out"
syntax:
$(selector).fadeIn(speed.callback);
speed-argument:slow,fast,毫秒
section 02:example
/*common*/
*{margin:0;padding:0;}
body{font-family:"微软雅黑",sans-serif;}
li a{display:block;color:#fff;text-decoration:none;}
ul{list-style:none;}
.container{width:1500px;height:200px;margin:25px auto;background:#FFC;}
.square{
width:200px;
height:50px;
background:gray;
opacity:0.5;
margin:25px;
display:none;
}
.square2{
width:200px;
height:50px;
background:gray;
opacity:0.5;
margin:25px;
display:none;
}
.square3{
width:200px;
height:50px;
background:gray;
opacity:0.5;
margin:25px;
display:none;
}
#description{
margin:25px;
margin-left:50px;
}
</style>
<script>
$(function(){
$("#fade").click(function(){
$(".square").fadeIn(function(){
$(".square").css("display","inline-block");
});
});
$("#fade02").click(function(){
$(".square2").fadeIn("slow",function(){
$(".square2").css("display","inline-block");
});
});
$("#fade03").click(function(){
$(".square3").fadeIn(3000,function(){
$(".square3").css("display","inline-block");
});
});
});
</script>
<div class="container">
<div class="square" >
This is txt.....
</div>
<div class="square2" >
This is txt2.....
</div>
<div class="square3" >
This is txt3.....
</div>
</div>
<div id="description" role="description">
<p class="txt"></p>
<button type="button" id="fade">fade</button>
<button type="button" id="fade02">fade02</button>
<input type="button" value="click" id="fade03"/>
</div>