更多/更少切换 - 添加过渡 - Shopify/Javascript

Question

我已经创建了一个更多/更少的切换按钮，我使用了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>

隐藏/显示功能

$( element ).hide/show( time (可选), easing (可选), callback (可选))

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

争论	支持（取决于浏览器）
元素	HTML 文档中的变量/元素
时间	毫秒数/“快”/“慢”
缓和	“线性”/“摆动”
打回来	隐藏/显示功能完成后要执行的功能/操作

例如这个隐藏函数

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

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

虽然这个显示功能

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

将过渡以显示导航栏 3/4 秒，速度稍有变化。 过渡后，它会在控制台中写入“Transition Finished”。