jQuery Animation step by step tutorial guide

Last updated on Aug 02, 2016

Alphanso Tech

jQuery / JS

4

JQuery Animation

jQuery is a fast and concise JavaScript library that simplifies the development of cross-browser applications.

In this blog we are focusing on jQuery animation.Animation is the technique of photographing successive drawings or positions of puppets or models to create an illusion of movement when the film is shown as a sequence.

jQuery animation (.animate()) function is very powerful API to manipulate html elements and add animation functionality. The use of animate function is very simple. First lets check the syntax of this function.

In this blog we are discussing about some basic functions and uses of jQuery animate() function.

Let’s consider and example of Image auto Zooom In/Out by jquery animate.

       <div class="jumbotron" style="height: 700px;">
                <div class="col-md-6">
                    <img src="hand.jpg"  class="at_image" style="width: 50%;"/>
                </div>
                <div class="col-md-6">
                    <img src="hand.jpg"  class="at_image" style="width: 50%;"/>
                </div>
                <div class="col-md-12">
                    <hr>
                </div>
                <div class="col-md-6">
                    <img src="hand.jpg"  class="at_image" style="width: 50%;"/>
                </div>
                <div class="col-md-6">
                    <img src="hand.jpg"  class="at_image" style="width: 50%;"/>
                </div>
            </div>

Script

   <script>
            $(".at_image").mouseover(function () {
                $(this).animate({width: '100%'});
            });
            $(".at_image").mouseout(function () {
                $(this).animate({width: '50%'});
            });
        </script>

To get more examples of animations and know more ,please visit our blogs regularly,we will back with more examples soon. Thank you

Let’s consider the another example of jQuery animation effects.

Expand and Shrink Textbox on focus and blur event

It’s quite easy and very straight forward.

Create some Textboxes

       <div class="col-md-6 col-md-offset-3">
                    <form class="form-signin">
                        <div class="well">
                            <input type="text"  class="form-control" placeholder="Default Textbox"  autofocus="" style="width: 200px;">
                        </div>
                        <div class="well">
                            <input type="text"  class="form-control at_expand" placeholder="Your Name Expandable"  autofocus="" style="width: 200px;" >
                        </div>
                        <div class="well">
                            <input type="text"  class="form-control at_expand" placeholder="Email address Expandable" autofocus="" style="width: 200px;" >
                        </div>

                    </form>
                </div>

In,above textboxes we have taken a class named “at_expand”, We will bind unobtrusive jquery event on this class.

    <script>
            $('.at_expand').focus(function () {
                $(this).attr('width-default', 200);
                $(this).animate({width: 400}, 'slow');
            }).blur(function () {
                var default_width = $(this).attr('width-default');
                $(this).animate({width: default_width}, 'slow');
            });
        </script>

Note : Don’t forget to include jquery.min.js

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

 

Collapse content by applying animation effect

<div class="container">
            <div class="header clearfix">
                <h3 class="text-muted">Hide Show Content</h3>
            </div>

            <div class="jumbotron" style="height: 700px;">
                <div class="col-md-12 ">
                    <h3>What is jQuery?</h3>

                    <div style="display: none; background-color: cadetblue;color: white;" class="well">
                        <p>
                            jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers.
                        </p>

                        <a class="btn btn-danger at_content_close" read_btn="read_btn-1">Close Answer</a>
                    </div>
                    <a class="btn btn-primary at_content" id="read_btn-1">Read Answer</a>

                </div>
                <div class="col-md-12 ">
                    <hr>
                    <h3>What is jQuery animation?</h3>

                    <div style="display: none; background-color: cadetblue;color: white;" class="well">
                        <p>
                            The jQuery animate() method is used to create custom animations. Syntax: $(selector).animate({params},speed,callback); The required params parameter defines the CSS properties to be animated.
                        </p>

                        <a class="btn btn-danger at_content_close" read_btn="read_btn-2">Close Answer</a>
                    </div>
                    <a class="btn btn-primary at_content" id="read_btn-2">Read Answer</a>

                </div>
                <div class="col-md-12 ">
                    <hr>
                    <h3>What is php?</h3>

                    <div style="display: none; background-color: cadetblue;color: white;" class="well">
                        <p>
                            PHP (recursive acronym for PHP: Hypertext Preprocessor) is a widely-used open source general-purpose scripting language that is especially suited for web development and can be embedded into HTML.
                        </p>

                        <a class="btn btn-danger at_content_close" read_btn="read_btn-3">Close Answer</a>
                    </div>
                    <a class="btn btn-primary at_content" id="read_btn-3">Read Answer</a>

                </div>

            </div>
        </div>
       <script>
            $(".at_content").click(function () {
                $(this).siblings().slideDown().animate({display: 'block'});
                $(this).css('display', 'none');
            });
            $('body').on('click', 'a.at_content_close', function () {
                var read_btn_id = $(this).attr('read_btn');
                $(this).parents('div:first').slideUp().animate({display: 'none'});
                $("#" + read_btn_id).css('display', 'inline-block');
            });

        </script>

 

[sociallocker]Download the complete code

Live demo of jQuery animation example

[/sociallocker]

 

I hope you will find this post very useful regarding jQuery Animation. Let me know any questions if you have in comment regarding jQuery. I will reply you ASAP.

Have you got cool idea about Web Application development or WordPress Development? Contact us Now to get free consultation on your idea. Alphanso Tech is rated as one of the best Web Development Company in India.

 

Post by Alphanso Tech

Created in 2009, Alphanso Tech is a leading IT Consulting company with a presence in the USA, Canada, and India.We are a trusted and leading service provider to many top-tier companies in the area of Custom WordPress Development , Web Application Development , iOS App Development , Outsourcing Services, Online Marketing and many other related activities.

4 Responses to jQuery Animation step by step tutorial guide

  1. Pingback: Collapse content by jQuery animation | Coding Tutes

  2. Pingback: Jquery Drag and Drop Tutorial | step by step tutorial guide

  3. Pingback: jQuery fadein - fadeout tutorials with examples

  4. Pingback: jQuery navigation menu examples | step by step tutorial guide

Leave a Reply

Your email address will not be published. Required fields are marked *