看程序学jquery7-效果

示例 1 : 显示 隐藏 切换

<script src="http://how2j.cn/study/jquery.min.js"></script>
   
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.hide();
   });
   $("#b2").click(function(){
      div.show();
   });
   $("#b3").click(function(){
      div.toggle();
   });
   $("#b4").click(function(){
      div.show(1000);
   });
   $("#b5").click(function(){
      div.hide(1000);
   });
   $("#b6").click(function(){
      div.toggle(1000);
   });
  
});
   
</script>
   
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
 
<button id="b1">立即隐藏</button>
<button id="b2">立即显示</button>
<button id="b3">立即切换</button>
 
<button id="b4">延时显示</button>
<button id="b5">延时隐藏</button>
<button id="b6">延时切换</button>
 
<br>
<br>
   
<div id="d">
用于演示效果的DIV
</div>

示例 2 : 向上滑动 向下滑动 滑动切换

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.slideUp();
   });
   $("#b2").click(function(){
      div.slideDown();
   });
   $("#b3").click(function(){
      div.slideToggle();
   });
   $("#b4").click(function(){
      div.slideUp(2000);
   });
   $("#b5").click(function(){
      div.slideDown(2000);
   });
   $("#b6").click(function(){
      div.slideToggle(2000);
   });
   
});
    
</script>
    
<style>
button{
  display:block;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
   
<button id="b1">向上滑动</button>
<button id="b2">向下滑动</button>
<button id="b3">滑动切换</button>
  
<button id="b4">延时向上滑动</button>
<button id="b5">延时向下滑动</button>
<button id="b6">延时滑动切换</button>
  
<br>
<br>
    
<div id="d">
用于演示效果的DIV
</div>

示例 3 : 淡入 淡出 淡入淡出切换 指定淡入程度

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
      div.fadeIn();
   });
   $("#b2").click(function(){
      div.fadeOut();
   });
   $("#b3").click(function(){
      div.fadeToggle();
   });
   $("#b4").click(function(){
      div.fadeIn(2000);
   });
   $("#b5").click(function(){
      div.fadeOut(2000);
   });
   $("#b6").click(function(){
      div.fadeToggle(2000);
   });
 
   $("#b7").click(function(){
      $("#d1").fadeTo("slow",0.2);
      $("#d2").fadeTo("slow",0.5);
      $("#d3").fadeTo("slow",0.8);
   });
   
});
    
</script>
    
<style>
button{
  display:block;
}
table div{
    border:solid px gray;
  background-color:pink;
  width:80px;
  height:50px;
}
div{
  border:solid 1px gray;
  background-color:pink;
  width:300px;
  height:100px;
}
</style>
<button id="b2">淡出</button> 
<button id="b1">淡入</button>
<button id="b3">淡入淡出切换</button>
<button id="b5">延时淡出</button>
<button id="b4">延时淡入</button>
<button id="b6">延时淡入淡出切换</button>
 
<button id="b7">fadeTo</button>
 
<br>
<br>
    
<div id="d">
用于演示效果的DIV
</div>
 
<table>
<tr>
   <td>
      <div id="d1">
       用于演示fadeTo 20%
      </div>
   </td>
   <td>
     <div id="d2">
       用于演示fadeTo 50%
     </div>  
   </td>
 
   <td>
     <div id="d3">
      用于演示fadeTo 80%
     </div>  
   </td>
 
</tr>
 
</table>

示例 4 : 自定义动画效果

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000);
   });
});
    
</script>
    
<style>
button{
  display:block;
}
 
div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
   
<button id="b1">自定义动画</button>
 
<br>
<br>
    
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>
试一下

示例 5 : 回调函数

<script src="http://how2j.cn/study/jquery.min.js"></script>
    
<script>
$(function(){
var div = $("#d");
   $("#b1").click(function(){
    div.animate({left:'100px'},2000);
    div.animate({left:'0px',top:'50px',height:'50px'},2000,function(){
     alert("动画演示结束");
    });
   });
});
    
</script>
    
<style>
button{
  display:block;
}
 
div{
  background-color:pink;
  width:200px;
  height:80px;
  font-size:12px;
  position:relative;
}
</style>
   
<button id="b1">自定义动画结束时，会有提示框</button>
 
<br>
<br>
    
<div id="d">
<p>1. 向右移动100px</p>
<p>2. 向左下移动50px，同时高度变小</p>
</div>