jQuery를 사용하여 유리 아코디언 특수 효과를 만드는 단계에 대한 자세한 설명(코드 포함)

이번에는 유리 질감의 아코디언 특수 효과를 만드는 단계에 대한 jQuery자세한 설명을 가져왔습니다(코드 포함). jQuery에서 유리 질감의 아코디언 특수 효과를 만들기 위한 주의사항은 무엇인가요? 실제 사례이므로 살펴보겠습니다.

Rendering:

구체적인 코드는 다음과 같습니다.

html 코드:

<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 코드:

      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();

이 기사의 사례를 읽으신 후 방법을 마스터하셨다고 생각합니다. 다른 PHP 중국어 웹사이트 관련 기사도 주목해주세요!

추천 자료:

jquery는 마우스 작업 정지 캐러셀 효과를 구현합니다.

jquery 드래그 앤 드롭 효과를 구현하는 방법

위 내용은 jQuery를 사용하여 유리 아코디언 특수 효과를 만드는 단계에 대한 자세한 설명(코드 포함)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!