How to Create Effects in JQuery

In this article I have described that how to create effective webpage with help of JQuery.
  • 1780

Effects in JQuery

  • To create effective webpage, we use jQuery in our JavaScript code of webpage.
  • The jQuery helps us to create the number of effects, such as fading, sliding and animation effect on webpage with help of different kinds of methods.

Lets change the opacity of the color in webpage

Syntax

we can use fade effect as the following way

<script type="text/javascript">

    $(document).ready(function () {

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

            $("div").fadeTo("slow", 0.30);

        });

    });

</script>

 

NOTE -  In above Syntax, fadeTo() method is used to change the opacity of color.

 

<!DOCTYPE html>

<html>

<head>

    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>

<script type="text/javascript">

    $(document).ready(function () {

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

            $("div").fadeTo("slow", 0.30);

        });

    });

</script>

</head>

<body>

<div style="background:green;width:400px;height:500px">

<button>Fade This Color</button>

</div>

</body>

</html>


OUTPUT


When we run it


fade1.jpg


When we click on button


  fade2.jpg

You may also want to read these related articles here

Ask Your Question 


Got a programming related question? You may want to post your question here
© 2020 DotNetHeaven. All rights reserved.