MORE/LESS TOGGLE - 添加过渡 - Shopify/Javascript

Question

我创建了一个 More/Less 切换按钮，我使用了 https://jadepuma.com/blogs/blog/more-less-toggles-for-shopify-descriptions。

它有效，但想要创建一个过渡。当点击阅读更多按钮时，它会慢慢打开其余内容。然后点击少读它慢慢关闭。

这就是我想要的，当切换按钮时，它会慢慢显示和关闭内容：codepen.io/royketelaar/pen/avWxve

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <script>
            $( ".product-description-full" ).hide();
        
          $( document ).ready(function() {
          $('.readmore').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              descriptionFull.style.display = 'block';
              var descriptionShort = document.querySelector('.product-description-short');
              descriptionShort.style.display = 'none';
                    });
            $('.readless').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              descriptionFull.style.display = 'none';
              var descriptionShort = document.querySelector('.product-description-short');
              descriptionShort.style.display = 'block';
            });  
            });
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<h2>This is a read more/less button demo</h2>

<p>This paragraph is above the read more/less button. </p>

<div class="product-description-short lessmore"><a href="#" class="readmore">Read More</a></div> <div class="product-description-full">

<h3>This header is below the read more button</h3>

<p>This paragraph is below the read more button. This is text to fill in space</p>


<div class="lessmore"><a href="#" class="readless">Read Less</a></div> </div>

Answer 1

$( ".product-description-full" ).hide();
        
          $( document ).ready(function() {
          $('.readmore').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              $(descriptionFull).show(500, 'swing');
              var descriptionShort = document.querySelector('.product-description-short');
              $(descriptionShort).hide(500, 'swing');
                    });
            $('.readless').click(function (event) {
              event.preventDefault();
              var descriptionFull = document.querySelector('.product-description-full');
              $(descriptionFull).hide(500, 'swing');
              var descriptionShort = document.querySelector('.product-description-short');
              $(descriptionShort).show(500, 'swing')
            });  
            });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>



<h2>This is a read more/less button demo</h2>

<p>This paragraph is above the read more/less button. </p>

<div class="product-description-short lessmore"><a href="#" class="readmore">Read More</a></div> <div class="product-description-full">

<h3>This header is below the read more button</h3>

<p>This paragraph is below the read more button. This is text to fill in space</p>


<div class="lessmore"><a href="#" class="readless">Read Less</a></div> </div>

Hide/Show 函数

$(element).hide/show(time(可选), easing（可选），回调（可选））

如果您忽略除 element 之外的所有参数，该函数将执行与您所做的相同的操作。这些参数可以支持这些值：

Argument	Supports(Depends on Browser)
element	variable/element from HTML document
time	number of milliseconds / 'fast' / 'slow'
easing	'linear' / 'swing'
callback	function/action to do after hide/show function finishes

比如这个隐藏函数

$("help-btn").hide(1000, 'linear');

将以恒定速度转换隐藏帮助按钮1秒。

虽然这个显示功能

$("nav-bar").show(750, 'swing', function(){console.log("Transition Finished");});

将以略微变化和缓和的速度过渡到显示导航栏 3/4 秒。转换完成后，它会在控制台中写入“Transition Finished”。

MORE/LESS TOGGLE - 添加过渡 - Shopify/Javascript

MORE/LESS TOGGLE - Add Transition - Shopify/Javascript

html

javascript

jquery

shopify

Hide/Show 函数