jQuery animate() line Height

Description

jQuery animate() line Height

View in separate window 



<!DOCTYPE html>
<html>
<head>
<script 
 src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>//from  ww  w  .  ja  v a 2  s .c  o m
<script>
$(document).ready(function(){
  $(".btn1").click(function(){
    $("p").animate({lineHeight: "+=1em"});
  });
  $(".btn2").click(function(){
    $("p").animate({lineHeight: "-=1em"});
  });
});
</script>
</head>
<body>

<button class="btn1">Animate +</button>
<button class="btn2">Animate -</button>

<p style="line-height:1em;">This is a paragraph. 
This is some more text. This is some more text. This is some more text. 
This is some more text. This is some more text. This is some more text. 
This is some more text. This is some more text. This is some more text. 
This is some more text. This is some more text. This is some more text. 
This is some more text.</p>

</body>
</html>



PreviousNext

Related