Detailed explanation of the steps to create a glass accordion special effect with jQuery (with code)

This time I will bring you jQuery Detailed explanation of the steps to create a glass-textured accordion special effect (with code). What are the precautions for using jQuery to create a glass-textured accordion special effect? ​​The following are Let’s take a look at practical cases.

Rendering:

The specific code is as follows:

html code:

<section class="strips">
   <article class="stripsstrip">
     <p class="stripcontent">
       <h1 class="striptitle" data-name="Lorem">Awesome</h1>
     </p>
   </article>
   <article class="stripsstrip">
     <p class="stripcontent">
       <h1 class="striptitle" data-name="Ipsum">Words</h1>
       <p class="stripinner-text">
         <h2>Ettrics</h2>
         <script src="http://www.w2bc.com/scripts/2bc/_gg_980_90.js" type="text/javascript"></script>
         <p>
           <a href="#" target="_blank"><i class="fa fa-qq"></i></a>
         </p>
       </p>
     </p>
   </article>
   <article class="stripsstrip">
     <p class="stripcontent">
       <h1 class="striptitle" data-name="Dolor">Go</h1>
       <p class="stripinner-text">
         <h2>Ettrics</h2>
         <p>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!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-weibo"></i></a>
         </p>
       </p>
     </p>
   </article>
   <article class="stripsstrip">
     <p class="stripcontent">
       <h1 class="striptitle" data-name="Sit">Inside</h1>
       <p class="stripinner-text">
         <h2>Ettrics</h2>
         <p>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!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-weixin"></i></a>
         </p>
       </p>
     </p>
   </article>
   <article class="stripsstrip">
     <p class="stripcontent">
       <h1 class="striptitle" data-name="Amet">Here</h1>
       <p class="stripinner-text">
         <h2>Ettrics</h2>
         <p>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!</p>
         <p>
           <a href="#" target="_blank"><i class="fa fa-leaf"></i></a>
         </p>
       </p>
     </p>
   </article>
   <i class="fa fa-close stripclose"></i>
 </section>

js code:

      var Expand = function () {
      var tile = $('.stripsstrip');
      var tileLink = $('.stripsstrip > .stripcontent');
      var tileText = tileLink.find('.stripinner-text');
      var stripClose = $('.stripclose');
      var expanded = false;
      var open = function () {
        var tile = $(this).parent();
        if (!expanded) {
          tile.addClass('stripsstrip--expanded');
          tileText.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
          stripClose.addClass('stripclose--show');
          stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)');
          expanded = true;
        }
      };
      var close = function () {
        if (expanded) {
          tile.removeClass('stripsstrip--expanded');
          tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)');
          stripClose.removeClass('stripclose--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();

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

jquery implements mouse operation suspension carousel effect

jquery drag effect implementation method

The above is the detailed content of Detailed explanation of the steps to create a glass accordion special effect with jQuery (with code). For more information, please follow other related articles on the PHP Chinese website!