jQuery学习第六课(jquery中的动画)



1.基础动画

2.渐变动画

3.滑动动画

4.自定义动画

5.动画队列



? jquery中的基础动画(略,见前面的课)


a. show()显示

b. hide()隐藏

c. toggle()切换show/hide


? jquery中的渐变动画


a.    fadeIn()

b.    fadeOut()

c.    fadeTo()

d.  fadeToggle()切换fadeIn/fadeOut

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>demo6</title>
 <script src="jquery.js"></script>
 <style>
  p{
   width: 300px;
   padding: 10px;
   border: 1px solid #abcdef;
   /*display: none;*/
  }
 </style>
</head>
<body>
 <a href="###">点击</a>
 <p>Javascript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如Perl,遗留的速度问题,为客户提供更流畅的浏览效果。当时服务端需要对数据进行验证,由于网络速度相当缓慢,只有28.8kbps,验证步骤浪费的时间太多。于是Netscape的浏览器Navigator加入了Javascript,提供了数据验证的基本功能。</p>
 
 <script>
  /*$(‘a‘).click(function(){
   //透明度opacity从0变成1
   $(‘p‘).fadeIn(1000);
  });*/

  /*$(‘a‘).click(function(){
   //透明度opacity从1变成0
   $(‘p‘).fadeOut(1000);
  })*/

  /*$(‘a‘).click(function(){
   $(‘p‘).fadeTo(1000,.3,function(){
    alert(‘fadeTo方法执行完成‘);
   });
  });*/

  $(‘a‘).click(function(){
   $(‘p‘).fadeToggle(500);
  });
 </script>
</body>
</html>



? jquery中的滑动动画

a. slideDown()

b. slideUp()

c. slideToggle()

<script>
  /*$(‘a‘).click(function(){
   $(‘p‘).slideDown(500);//向下滑动显示隐藏的元素
  });*/

  /*$(‘a‘).click(function(){
   $(‘p‘).slideUp(500););//与slideDown相反,向上收起隐藏显示的元素
  });*/

  $(‘a‘).click(function(){
   $(‘p‘).slideToggle(500);//切换slideDown/slideUp
  });
 </script>

? animate自定义动画

? jquery中的动画队列


stop() 

dequeue()

finish()

delay()

jQuery.fx.interval(),设置运动的时间,不推荐

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="
http://www.w3.org/1999/xhtml
" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>demo9</title>
 <script src="jquery.js"></script>
 <style>
  p{
   width: 300px;
   height: 300px;
   background: #abcdef;
   display: none;
  }
 </style>
</head>
<body>
 <a href="###">aaaaaa</a>
 <p>bbbbbbbbb</p>

 <script>
  $(‘a‘).hover(function(){
   $(‘p‘).stop(false,true).slideDown(500);
  },function(){

   $(‘p‘).stop(false,true).slideUp(500);
  });
 </script>
</body>
</html>

---------------------------------------------------------------------------------------------------------

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>demo10</title>
 <style>
  div{
   width: 50px;
   height: 50px;
   background: #f60;
   position: absolute;
   left: 10px;
   top: 40px;
  }
 </style>
 <script src="jquery.js"></script>
</head>
<body>
 <button>RUN</button>
 <input id="stop" type="button" value="stop" />
 <input id="dequeue" type="button" value="dequeue" />
 <input id="finish" type="button" value="finish" />
 <div></div>

 <script>
  $(‘button‘).click(function(){
   $(‘div‘).animate({
    ‘top‘:‘400px‘
   },2000).animate({
    ‘left‘:‘800px‘
   },2000).animate({
    ‘top‘:‘40px‘
   },2000).animate({
    ‘left‘:‘10px‘
   },2000);
  });

  $(‘#stop‘).click(function(){
   $(‘div‘).stop(false,true);
  });

  $(‘#dequeue‘).click(function(){
   $(‘div‘).dequeue();
  });

  $(‘#finish‘).click(function(){
   $(‘div‘).finish();
  });
 </script>
</body>
</html>

? jquery动画算法插件

先要下载easing插件。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
 <title>demo12</title>
 <script src="jquery.js"></script>
 <script src="easing.js"></script>
 <style>
  div{
   width: 50px;
   height: 50px;
   position: absolute;
   left: 10px;
   top: 40px;
   background: #abcdef;
  }
 </style>
</head>
<body>
 <input type="button" value="点击" />
 <div></div>

 <script>
  $(‘input‘).click(function(){
   $(‘div‘).animate({‘left‘:‘800px‘},2000,‘easeOutBounce‘);
  });
 </script>
</body>
</html>

//jquery中函数的参数有‘easing’这一项,即可用easing插件中的方法,

表示元素在动画中的过渡时使用的缓动函数。

<body>
 <input type="button" value="点击" />
 <div></div>

 <script>
  $(‘input‘).click(function(){
   $(‘div‘).animate({‘left‘:‘-=100px‘},2000);
  });
 </script>
</body>


jQuery学习第六课(jquery中的动画),古老的榕树,5-wow.com

郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。