jQuery中的动画效果

最新推荐文章于 2022-08-27 11:12:48 发布

Strive_18

最新推荐文章于 2022-08-27 11:12:48 发布

阅读量475

点赞数

分类专栏： jQuery知识

本文链接：https://blog.csdn.net/TC_16_zl/article/details/79762994

版权

8 篇文章 0 订阅

订阅专栏

 
 jQuery中的动画效果 

 
 show() 显示 display:block/inline-block; 

 
 hide() 隐藏 display:none; 

 
 实现原理：在元素内部将display的属性改变 

 
 可以在()里面传递参数  

 
 数字 设置消失的时间消失时是渐变消失的 

 
 参数slow(200毫秒) normal(400毫秒) fast(600毫秒) 

 
 写错或是不写值时 默认值是normal 

 
 可以传递回调函数 可以实现列队动画 

 
 列队动画：一个动画执行完毕再执行下一个动画 

 
 实现列队动画的方法 

 
 可以通过eq()获得元素 通过将元素一层一层嵌套实现（已经很少使用） 

 
 代码如下： 

 
 CSS代码 

 
 .test{ 

 
  padding:5px; 

 
  margin:5px; 

 
  background:pink; 

 
  float:left; 

 
  display:none; 

}

 
 HTML代码 

 
 <div class="test">L</div> 

 
  <div class="test">I</div> 

 
  <div class="test">K</div> 

 
  <div class="test">E</div> 

 
  <input type="button" value="show" class="show" /> 

 
  <input type="button" value="hide" class="hide"/> 

 
 jQuery代码 

 
 $(function(){ 

 
  $('.show').click(function(){  

 
  $('.test').eq(0).show('slow',function(){  

 
  $('.test').eq(1).show('slow',function(){ 

 
  $('.test').eq(2).show('slow',function(){ 

 
  $('.test').eq(3).show('slow'); 

});

});

});

});

});

 
 可以通过回调函数实现异步动画 

 
 $(function(){ 

 
  $('.show').click(function(){ 

 
  $('.test').first().show('slow',function Sh(){ 

 
  $(this).next().show('slow',Sh); 

});

});

});

 
 动画效果逐个显示用first(),next()加回调函数 

 
 动画效果逐个隐藏用last(),prev()加回调函数 

 
 toggle() 此函数可以实现点击切换的功能 

 
  实现点击隐藏和显示之间的切换功能 

 
  内部也可以传递slow、fast、normal的参数 

 
 slideUp 向上卷动 

 
 slideDown 向下卷动 

 
 slideToggle 可以实现切换 内部有自动的判断功能 

 
 fadeOut 淡出的动画效果 

 
 fadeIn 淡入的动画效果 

 
 fadeTogge 淡入淡出的切换 内部含有自动的判断功能 

 
 fadeTo 淡入淡出到 参数是小数如0.33 

 
 animate  

 
 自定义动画 可以实现多重同步动画 

 
 通过键值对的方式给元素添加多个动画 

 
 内部可以传递速度参数(fast、slow、normal) 

 
 以及回调函数(动画执行完成后执行) 

 
 可以实现元素的位移动画元素要设置position:absolute;  

 
 指定元素移动到指定的位置 

 
 可以通过'+='、'-='的方式实现累加 累减的功能 

 
 可以通过回调函数的嵌套实现列队动画  

 
 可以实现多个元素之间的列队动画 （ 
 但是效率很低 会干扰其它动画 
 ） 

 
 内部含有两种运动状态 swing 缓慢运动  
 linear 匀速运动 默认值为swing 

 
 代码如下： 

 
 $(function(){ 

 
  $('input').click(function(){ 

 
  $('div').animate({ 

 
  height:'200px' 

 
  },function(){ 

 
  $('div').animate({ 

 
  width:'300px' 

 
  },function(){ 

 
  $('div').animate({ 

 
  opacity:0.5 

});

});

});

});

});

 
 在同一个元素的基础上 可以通过连缀或者顺序排列的方法实现列队动画 （ 
 不能实现多个元素之间的列队动画 
 ） 

 
 代码如下： 

 
 $('input').click(function(){  

 
  $('div').animate({width:'200px'}) 

 
  .animate({height:'300px'}) 

 
  .animate({opacity:0.5}) 

});

 
 queue()  

 
 此方法可以实现多个元素的列队动画不会对其它的动画进行干扰 每个动画各自执行 

 
 queue() 此动画后面再执行其它的动画时 需要在次动画内部传入一个next 在动画内部进行调用 才可以使此动画后面的动画进行执行(1.4版本之后出现的方法) 不进行传参 在queue方法内部添加$(this).dequeue();(1.4版本之前使用的方法)也同样可以实现此效果 

 
 代码如下： 

 
 $('input').click(function(){ 

 
  $('#box').slideUp('slow') 

 
  .slideDown('slow') 

 
  .queue(function(next){  

 
  $(this).css('background','yellow'); 

 
  next(); 

})

 
  .hide('slow'); 

});

 
 还可以获得列队动画的长度 需要传入fx 使用count()获得列队动画的长度 （ 
 但是一般很少使用 
 ） 

 
 clearQueue() 可以实现对列队动画的清除 

 
 stop() 可以实现动画的停止 

 
 只有一个动画时 执行stop() 会将这个动画停止 

 
 有多个列队动画时 执行stop() 会停止当前的动画 继续执行下一个列队动画 

 
 内部有两个参数 第一个参数表示是否停止掉后面的所有动画内容 参数值为true时会将列队动画后面的所有动画都停止 默认值为false 

 
 第二个参数参数值为true时表示停止时 立刻跳到当前动画的最后的位置 默认值是false 

 
 delay() 时间延迟的方法 内部的参数为数值 表示 

 
  延迟的时间 单位是毫秒 

 
 arguments.callee 获取当前调用函数的本体 

 
 :animated 过滤器 可以通过次过滤器实现对运动的 

 
  动画的查找 改变它的一些属性 

 
 代码如下： 

 
 <!DOCTYPE html> 

 
 <html> 

 
 <head> 

 
 <meta charset="utf-8"> 

 
 <title>DOM操作</title> 

 
 <script type="text/javascript" src="jquery.js"></script> 

 
 <style> 

 
  #box{ 

 
  height:100px; width:100px;background:red; 

 
  position:absolute; top:50px; left:0; 

}

 
  #pox{ 

 
  height:100px;width:100px;background:yellow; 

 
  position:absolute; top:200px; left:0; 

}

 
 </style> 

 
 </head> 

 
 <body> 

 
  <input type="button" value="查找" id="cha" /> 

 
  <div id="box">box</div> 

 
  <div id="pox">pox</div> 

 
  <script> 

 
  $(function(){ 

 
  $("#box").slideToggle('slow',function(){ 

 
  $(this).slideToggle('slow',arguments.callee) 

});

 
  $("#cha").click(function(){ 

 
  $(':animated').css('background','blue'); 

});

});

 
 </script> 

 
 </body> 

 
 </html> 

 
  动画的全局属性 

 
 $.fx.interval = 数值; 改变所有动画的运行速度 

 
 $.fx.off = true; 关闭页面中的所有动画  

关注