jQuery实现带玻璃流光质感的手风琴特效是一款基于jQuery+CSS3实现的带玻璃流光质感的手风琴特效，分享给大家，具体如下

效果图：

具体代码如下：

html代码：

   
     
Awesome
     
   
   
     
Words

  Ettrics
 
  
 
  

    
  

     
   
   
     
Go

  Ettrics
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!
  

    
  

     
   
   
     
Inside

  Ettrics
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!
  

    
  

     
   
   
     
Here

  Ettrics
  
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!
  

    
  

     
   
   
 

js代码：

      var Expand = function () {
      var tile = $('.strips__strip');
      var tilelink = $('.strips__strip > .strip__content');
      var tileText = tilelink.find('.strip__inner-text');
      var stripClose = $('.strip__close');
      var expanded = false;
      var open = function () {
 var tile = $(this).parent();
 if (!expanded) {
   tile.addClass('strips__strip--expanded');
   tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
   stripClose.addClass('strip__close--show');
   stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
   expanded = true;
 }
      };
      var close = function () {
 if (expanded) {
   tile.removeClass('strips__strip--expanded');
   tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
   stripClose.removeClass('strip__close--show');
   stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)');
   expanded = false;
 }
      };
      var bindActions = function () {
 tilelink.on('click', open);
 stripClose.on('click', close);
      };
      var init = function () {
 bindActions();
      };
      return { init: init };
    }();
    Expand.init();

希望本文可以给大家带来启发，帮助大家更好地学习jquery程序设计。