Animate line height - Javascript jQuery Method and Property

Javascript examples for jQuery Method and Property:animate

  1. HOME
  2. Javascript
  3. jQuery Method and Property
  4. animate

Description

Animate line height

Demo Code

ResultView the demo in separate window 



<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").animate({lineHeight: "+=1em"});
    });/*  w w w  . j  a va 2 s. com*/
    $(".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 test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test. This is a test.
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>

Related Tutorials