JQuery 之各类动画效果的实现知识点


隐藏显示、切换与滑动 、淡入淡出和动画


隐藏显示

$(selector).hide(speed,callback)  //隐藏
$(selector).show(speed,callback) //显示

例子

$(document).ready(function(){
  $("button").click(function(){
  $("p").hide(1000,function(){
    $("p").show(1000);
  });
  });
});


切换与滑动

$(selector).toggle(speed,callback)  //切换功能

 

toggle() 函数使用 show() 或 hide() 函数来切换 HTML 元素,同一个按钮可以点击两次,实现隐藏和显示的效果,其实某些特定用途可以代替他们

$(selector).slideDown(speed,callback)	//向下滑动,并显示遮挡
$(selector).slideUp(speed,callback)	//向上滑动,并隐藏遮挡
$(selector). slideToggle(speed,callback)	//上下滑动,实现切换

淡入淡出和动画

$(selector). fadeOut(speed,callback)	//变淡至空
$(selector). fadeIn(speed,callback)	//变亮至全部
$(selector). fadeTo(speed,opacity,callback) //变淡至指定效果
$(selector).animate({params},duration,easing,callback)  //动画


动画实例animate

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({width:'500', height: "200" , fontSize: "8em" },1000);
  });
});
</script>
</head>

<body>
<div id="test" style="background:yellow;width:300px;height:300px">
PHP100视频
</div>
<button type="button">按钮</button>
</body>


</html>

滑动效果实例slideToggle

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $(".flip").click(function(){
    $(".panel").slideToggle("slow");
  });
});
</script>
 
<style type="text/css"> 
div.panel,p.flip
{
margin:0px;
padding:5px;
text-align:center;
background:#e5eecc;
border:solid 1px #c3c3c3;
}
div.panel
{
height:120px;

}
</style>
</head>
 
<body>
 
<div class="panel">
<p>PHP100视频教程 jquery课程效果</p>
<p>具体代码来源于w3c参考代码</p>
</div>
 
<p class="flip">点下试试</p>
 
</body>
</html>


注:如果要调试实例请先载入jquery.js库文件