• jQuery Effects-Animation

    jQuery Effects-Animation

    In jQuery Effects-Animation has animate() method lets you create custom animations.

    Syntax:   $(selector).animate({params}, speed,callback);

    params This required parameter defines the CSS properties to be animated.
    speed Parameter specifies the duration of the effect. It can take the following values: “slow”, “fast”, or milliseconds.
    callback Parameter is the name of a function to be executed after the fading completes.

    Note: By default, all HTML elements have a static position, and cannot be moved. To manipulate the position, remember to first set the CSS position property of the element to relative, fixed, or absolute.

    Various uses of jQuery animate() function:

    1. Manipulate Multiple CSS Properties:

      We can allow to change values of multiple CSS properties at a time when using animate() function. For Example,

    $(“button”).click(function(){$(“div”).animate({

    left:’250px’,

    opacity:’0.5′,

    height:’150px’,

    width:’150px’

    });

    });

    We can almost all CSS properties manipulated at the time. However, there is one important thing to remember: all property name must be camel-cased when used with the animate() method: For Example, you need to right property “paddingLeft” instead of ”padding-left”.

    Also, color animation is not included in the core jQuery Library. If you want to animate color, you need to download the Color Animations plugin from jQuery.com.

    1. Using Relative Values:

    We can allow changing original values of CSS properties with relative values in incremented or decremented ways. This is done by using += or -= operator in from of the values. For Example,

    $(“button”).click(function(){$(“div”).animate({

    left:’250px’,

    height:’+=150px’,

    width:’+=150px’

    });

    })

    1. Using Pre-Defined Values:

    We can even specify a property animation value as “show”, “hide”, or “toggle”. For Example,

    $(“button”).click(function(){$(“div”).animate({

    height:’toggle’

    });

    });

    1. Using Queue Functionality:

    jQuery has default queue functionality for animations. This means that, if you write multiple animate() calls after each other, jQuery creates an “internal” queue with these method calls. Then it runs the animate calls ONE by ONE.

    $(“button”).click(function(){var div=$(“div”);

    div.animate({height:’300px’,opacity:’0.4′},”slow”);

    div.animate({width:’300px’,opacity:’0.8′},”slow”);

    div.animate({height:’100px’,opacity:’0.4′},”slow”);

    div.animate({width:’100px’,opacity:’0.8′},”slow”);

    });

    jQuery stop() Method

    The jQuery stop() method is used to stop an animation or effect before it is finished. The stop() method works for all jQuery effect functions, including sliding, fading and custom animations.

    Syntax:   $(selector).stop(stopAll, goToEnd);

    stopAll Parameter default is “false”. Stops only the active animation, allowing any queued animations to be performed afterwords.
    goToEnd Default is “false”. Parameter specifies whether or not to complete the current animation immediately.

    jQuery Effect-Animation Program Code

    Example:

    I have created very simple example to understand jQuery animation effect on Image width/height in program.

    jQuery Effect - Animation

    jQuery Effect – Animation

    1. First create the New PHP Project in Netbeans.
    1. Add the jQuery libraries. Also add these libraries to your web page.

    <!–Include jQuery Library–>

    <script src=”js/jquery-1.11.3.min.js”></script>

    1. Now start to draw the design structure which is having an Image Control and a button to apply effect. Code written below.
    <body><form name=”frmAnimateEffect” id=”frmAnimateEffect” method=”post” action=””>

    <table>

    <tr>

    <th colspan=”2″>Animation Effect On – Width/Height</th>

    </tr>

    <tr>

    <td>

    <div name=”divImage1″ id=”divImage1″  width=”500″ height=”100″>

    <img name=”Image1″ id=”Image1″ src=”images/GaneshLogo4.png” width=”500″ height=”100″ />

    </div>

    </td>

    </tr>

    <tr>

    <td style=”text-align: center;”>

    <input type=”submit” id=”btnAnimate” name=”btnAnimate” value=”Animate” />

    </td>

    </tr>

    </table>

    </form>

    </body>

    1. Write jQuery code for, when submit button is clicked Image has animated on width/height properties.

    Note: Here, Submit button click has not recognized by the jQuery code. So, form submit event is used to perform sliding operation.

    <!–jQuery Code to animate Image–><script>

    $(document).ready(function(){

    $(“form”).submit(function(event){

    event.preventDefault();

    var div=$(“#divImage1″);

    div.animate({height:’20px’,opacity:’0.4′},”slow”);

    div.animate({width:’100px’,opacity:’0.8′},”slow”);

    div.animate({height:’100px’,opacity:’0.4′},”slow”);

    div.animate({width:’500px’,opacity:’0.8′},”slow”);

    });

    });

    </script>

    1. Now save and run the practical.
    Appreciate my work :Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedInPin on PinterestShare on RedditShare on StumbleUponShare on TumblrDigg thisShare on YummlyShare on VKFlattr the authorBuffer this page

Leave a Reply

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