He creado un botón de alternar Más/Menos para el que he usado https://jadepuma.com/blogs/blog/more-less-toggles-for-shopify-descriptions .
Funciona, pero quiero crear una transición. Al hacer clic en el botón Leer más, se abre lentamente el resto del contenido. Y haga clic en leer menos se cierra lentamente.
Esto es lo que busco, cuando se alterna el botón, revela y cierra lentamente el contenido: 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> $( ".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>$( elemento ). ocultar/mostrar ( tiempo (opcional), aceleración (opcional), devolución de llamada (opcional))
Si ignora todos los argumentos excepto el elemento , la función hará lo mismo que hizo usted. Estos argumentos pueden soportar estos valores:
| Argumento | Compatible (depende del navegador) |
|---|---|
| elemento | variable/elemento del documento HTML |
| tiempo | número de milisegundos / 'rápido' / 'lento' |
| facilitando | 'lineal' / 'columpio' |
| llamar de vuelta | función/acción a realizar después de que finalice la función ocultar/mostrar |
Por ejemplo, esta función ocultar
$("help-btn").hide(1000, 'linear');hará una transición para ocultar el botón de ayuda durante 1 segundo a una velocidad constante.
Mientras que esta función de espectáculo
$("nav-bar").show(750, 'swing', function(){console.log("Transition Finished");});hará una transición para mostrar la barra de navegación durante 3/4 de segundo a una velocidad ligeramente cambiante y más lenta. Después de la transición, escribirá en la consola "Transición finalizada".