0

Tenho um parágrafo e gostaria de mostrar o resto dele quando eu clicasse em "Detalhes", porém quero uma animação para baixo mostrando o restante do conteúdo.

Parágrafo que vai aparecer:

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the... 'detalhes'

Parágrafo todo:

"Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since "

Como fazer para, quando clicar em "detalhes" aparecer o resto do parágrafo com uma animação?

1
  • Pode postar o seu código? Com o paragrafo e se tem algum jquery coloque-o também, assim é melhor para entender
    – Leo Letto
    Commented 2/12/2016 às 11:25

3 Respostas 3

2

Uma boa forma de exibir / esconder seria usando toggle

$('#detalhes').click(function(){
    $('.minhaDiv').slideToggle(400);
});

Onde 400 é o tempo em ms da animação;

Ou você pode usar o animate:

$('#detalhes').click(function(){
    $('.minhaDiv').animate({"height" : "altura que deve ficar"}, 400);
});
1

Baseado no exemplo do CSS Tricks, outra forma é delimitar o tamanho do parágrafo que será exibido, deixando uma cor gradiente no final dele para dar a sensação de descida no leia-mais.

var $el, $ps, $up, totalHeight;

$(".box .button").click(function() {

  totalHeight = 0

  $el = $(this);
  $p = $el.parent();
  $up = $p.parent();
  $ps = $up.find("p:not('.read-more')");

  $ps.each(function() {
    totalHeight += $(this).outerHeight();
  });

  $up
    .css({
      "height": $up.height(),
      "max-height": 9999
    })
    .animate({
      "height": totalHeight
    });

  $p.fadeOut();

  return false;

});
.box {
  max-height: 120px;
  position: relative;
  overflow: hidden;
}
.box .leia-mais {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  text-align: center;
  margin: 0;
  padding: 30px 0;
  
  background-image: linear-gradient(to bottom, transparent, gray);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
  <p>Praesent in mauris eu tortor porttitor accumsan. Mauris suscipit, ligula sit amet pharetra semper, nibh ante cursus purus, vel sagittis velit mauris vel metus. Aenean fermentum risus id tortor. Integer imperdiet lectus quis justo. Integer tempor. Vivamus
    ac urna vel leo pretium faucibus. Mauris elementum mauris vitae tortor. In dapibus augue non sapien. Aliquam ante. Curabitur bibendum justo non orci. In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum
    suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam id dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Mauris dictum
    facilisis augue. Fusce tellus. Pellentesque arcu. Maecenas fermentum, sem in pharetra pellentesque, velit turpis volutpat ante, in pharetra metus odio a lectus. Sed elit dui, pellentesque a, faucibus vel, interdum nec, diam. Mauris dolor felis, sagittis
    at, luctus sed, aliquam non, tellus. Etiam ligula pede, sagittis quis, interdum ultricies, scelerisque eu, urna. Nullam at arcu a est sollicitudin euismod. Praesent dapibus. Duis bibendum, lectus ut viverra rhoncus, dolor nunc faucibus libero, eget
    facilisis enim ipsum id lacus. Nam sed tellus id magna elementum tincidunt.
  </p>
  <p class="leia-mais"><a href="#" class="button">Read More</a>
  </p>
</div>

0

Você pode selecionar o elemento e usar .slideDown() para mostrá-lo, ou .slideToggle() caso queira mostrar e ocultar no mesmo botão.

$("#paragrafo").click(function()){
    $("#detalhes").slideDown();
});

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .