首页>>Jquery图片>>百叶窗折叠图片(2014-04-07)

百叶窗折叠图片

百叶窗折叠图片
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

JavaScript Code
  1. <script language="javascript">  
  2. $(document).ready(function(){  
  3.       
  4.     ///single  
  5.     $("ul#single li").mouseover(function(){  
  6.         $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  7.     });  
  8.   
  9.     $("ul#single li").mouseout(function(){  
  10.          $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  11.     });  
  12.       
  13.     //horizontal  
  14.     $("ul#horizontal li").mouseover(function(){  
  15.         $(this).stop().animate({width:'650px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  16.     });  
  17.   
  18.     $("ul#horizontal li").mouseout(function(){  
  19.         $(this).stop().animate({width:'40px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  20.     });  
  21.       
  22.     //vertical  
  23.      $("ul#vertical li").mouseover(function(){  
  24.         $(this).stop().animate({height:'400px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  25.     });  
  26.   
  27.     $("ul#vertical li").mouseout(function(){  
  28.         $(this).stop().animate({height:'42px'},{queue:false, duration:600, easing: 'easeOutBounce'})  
  29.     });  
  30.   
  31. });  
  32. </script>   

 


原文地址:http://www.freejs.net/article_jquerytupiantexiao_300.html