Effect methods in Jquery Library (Part 5)


Jquery effect methods are used for creating the animated graphics in web application
Jquery library contains so many methods for this functionality like

1. Hide
2.Show
3. Toggle
4. Slide
5. Fade
6. Animate
7. Stop etc.

Now let see the example of Hide and show method

>> show is used for showing the contains of element.
>> Hide is used for hiding the contains of element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#hide").click(function () {
                $("p").hide(1000);
            });
            $("#show").click(function () {
                $("p").show(1000);
            });
        });
    </script>
</head>
<body>
    <p>This is the test message. </p><br />
    <button id="hide">Hide Me</button>
    <button id="show">Show Me</button>

</body>
</html>

Note: Here 1000 is the speed of show method. It is optional.

Jquery has the following fading method
a. FadeIn()
b. fadeOut()
c. fadeToggle()
d. fadeTo()

FadeIn() Example

>> It is used for displaying the contains of any element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#show").click(function () {
                $("#p1").fadeIn();
                $("#p2").fadeIn("slow");
                $("#p3").fadeIn(4000);
            });
            
        });
    </script>
</head>
<body>
    <p id="p1" style="display:none;background-color:green;height:50px;">This is the test message. </p>
     <p id="p2" style="display:none;background-color:silver;height:50px;">This is the test message. </p>
     <p id="p3" style="display:none;background-color:blue;height:50px;">This is the test message. </p>
    <button id="show">Click Here</button>

</body>
</html>

Note: FadeIn() method conatins also speed parameter which specifies the durartion of effect.

Fade out
>> It is used for hiding the contains with some animated effect.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Fade").click(function () {
                $("#p1").fadeOut();
                $("#p2").fadeOut("slow");
                $("#p3").fadeOut(3000);
            });

        });
    </script>
</head>
<body>
    <p id="p1" style="background-color:green;height:50px;">This is the test message. </p>
     <p id="p2" style="background-color:silver;height:50px;">This is the test message. </p>
     <p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
    <button id="Fade">Click Here</button>

</body>
</html>

fadeTo()
>> This method is used for managing the opacity of current element.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../../Scripts/jquery.min.js"></script>
    <script>
        $(function () {
            $("#Fade").click(function () {
                $("#p3").fadeTo("slow",0.10);
            });

        });
    </script>
</head>
<body>
     <p id="p3" style="background-color:blue;height:50px;">This is the test message. </p>
      <button id="Fade">Click Here</button>

</body>
</html>

Animate Method

Animate method is used for doing animation in user interface.

Stop Method
It is used to stop the animation in Jquery library.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <!--<script src="../../Scripts/jquery.min.js"></script>-->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
        $(function () {
            $("#animate").click(function () {
                $("div").animate({left:'350px'},5000);
            });
            $("#stop").click(function () {
                $("div").stop();
            });
           
        });
    </script>
</head>
<body>
     <button id="animate">Animate Me</button>
     <button id="stop">Stop Me</button>
    <br />
    <div style="height:100px;width:100px;background-color:red; position:absolute; left:20px;">
        Try to animate me.
    </div>
</body>
</html>

Summary:

We have learnt the basic concept of effect method of Jquery Library.

Advertisements
Posted in Jquery. 1 Comment »

One Response to “Effect methods in Jquery Library (Part 5)”

  1. Learn Jquery with in 15 hrs | Chandradev's Blog Says:

    […] 5. Effect methods in Jquery Library (Part 5) […]


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: