How to make animation to show the rest of the paragraph?

Question

How to make animation to show the rest of the paragraph?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (0 votes)

0

I have a paragraph and would like to show the rest of it when I click on "Details", but I want an animation down showing the rest of the content.

Paragraph that will appear:

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

Paragraph all:

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

How do I, when I click on "details" the rest of the paragraph appears with an animation?

jquery

asked by anonymous 02.12.2016 / 12:24

3 answers

CSS - Centralize li ___ ___ erkimt Message "Invalid object name 'dbo.table' SQL Server Go Lang ______ qstntxt ___

I'm trying to use a select in my SQL Server Database that I own in Azure.

I'm using the Driver: link .

However, I get a message back:

mssql: Invalid object name 'dbo.table'.

Below my code, where am I wrong?

%pre%

Return:

C: \ Go \ bin \ go.exe run B: \ go \ gocode \ src \ main \ connect-bd.go
  2017/02/25 15:59:33 Main:
  2017/02/25 15:59:33 Opening
  2017/02/25 15:59:33 Opened
  2017/02/25 15:59:33 Pinging
  2017/02/25 15:59:33 Pinged
  2017/02/25 15:59:33 mssql: Invalid object name 'dbo.tbPessoa'.
  exit status 1

______azszpr186720___

In my connect string, I was missing out on which bank to use %code%

Done this connected in a good!

Without this information Select was being done in the default SQL master database.

It looks like this:

%pre%

___

score 2 · Answer 1

A good way to show / hide would be toggle

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

Where 400 is the time in ms of the animation;

Or you can use animate:

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

score 1 · Answer 2

Based on the example of CSS Tricks , another way is to delimit the size of the paragraph that will be displayed, leaving a color gradient at the end of it to give the feeling of descent into the read-over.

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><divclass="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>

score 0 · Answer 3

You can select the element and use .slideDown () to display it, or slideToggle () if you want to show and hide on the same button.

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