|
? ? jQuery,“一个优秀的JS库，大型开发必备”,常用方法，淡入淡出切换方法----fadeToggle();example：jQuery+javascript+DOM多技术结合式切换效果
? ? section 01:fadeToggle()?
? ? ? ? ? ? ? 功能："fade-in and fade-out"
? ? ?syntax:
? ? ? ? ? ? ? $(selector).fadeToggle(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:inline-block;
?? ? ? }
?? ?#square2{
?? ? ? width:200px;
?? ? ? height:50px;
?? ? ? background:gray;
?? ? ? opacity:0.5;
?? ? ? margin:25px;
?? ? ? display:inline-block;
?? ? ? }
?? ? .square3{
?? ? ? width:200px;
?? ? ? height:50px;
?? ? ? background:gray;
?? ? ? opacity:0.5;
?? ? ? margin:25px;
?? ? ? display:inline-block;
?? ? ? }
?? ?#description{
?? ??? ?margin:25px;
?? ??? ?margin-left:50px;
?? ??? ?display:inline-block;
?? ??? ?}
? ? /*三根横线*/
?? ?#control{width:30px;height:50px;float:left;margin-right:15px;}
?? ?#control p{
?? ??? ?border-bottom:2px solid gray;
?? ??? ?padding-top:3px;
?? ??? ?}
?? ?.txt{height:30px;width:45px;}
<script>
? ? ?$(document).ready(function() {//文档树加载完成后在执行js
? ? ? ? ?var square=document.getElementsByClassName("square");//DOM,get方法
? ? ? ? ? ? ?square[0].style.color="red";
?? ??? ??? ? square[0].style.background="#F93";
?? ? ? ? var square2=document.getElementById("square2");//DOM,get方法
?? ??? ? ? ? square2.style.color="blue";
?? ??? ??? ? square2.style.background="#996699";
? ? });
? ? ?$(document).ready(function() {
? ? ? ? $("#fadeToggle").click(function(){
?? ??? ??? ? $(".square").fadeToggle();
?? ??? ??? ? $("#square2").fadeToggle("slow",function(){
?? ??? ??? ??? ? ? ?$(".txt").css("background","gray");?
?? ??? ??? ??? ??? ?$(".txt").text("切换第二个方块！");
?? ??? ??? ??? ??
?? ??? ??? ??? ? });?
?? ??? ??? ? ?$(".square3").fadeToggle(3000)
?? ??? ??? ?});
? ? });
?? ?
?? ??? ??? ?
?? ?
</script>
<div class="container">
? ? ? ?<div class="square" >
? ? ? ? This is txt.....
? ? ? ?</div>
? ? ? ?<div id="square2" >
? ? ? ? This is txt2.....
? ? ? ?</div>
? ? ? ?<div class="square3" >
? ? ? ? This is txt3.....
? ? ? ?</div>
? ? </div>
? ? <div id="description" role="description">
? ? ? <div id="control">
? ? ? ?<p> ? </p>
? ? ? ?<p> ? </p>
? ? ? ?<p> ? </p>
? ? ? </div>
? ? ? <span>第二个方块:</span><span class="txt"></span>
? ? ? <div style="display:inline-block;margin-left:25px;">
? ? ? <button type="button" id="fadeToggle">fadeToggle</button>
? ? ? <button type="button" id="fade02">fade02</button>
? ? ? <input type="button" value="click" id="fade03"/>
? ? ? </div>
? ? </div>
?
|