Easily Animate Web Buttons/Objects using jQuery

Today I will tell you about animations in web using jQuery. As we know – jQuery offer us several default methods of effects: fade(In/Out/To), hide, show, slide(Down/Toggle/Up), toggle. This is ok, but what if we need more? So, animation will help us! It will help to slide between 2 states using really good effects. By default, ‘easing’ is optional param, so to use extra effects we will use additional jquery.easing.js library.

Here are samples and downloadable package:

Contents

Step 1. HTML
index.html
Step 2. CSS
templates/css/main.css
Step 3. JS
js/main.js
js/jquery.easing.1.3.js and js/jquery.min.js
Step 4. Images
Conclusion

Live Demo

[sociallocker]

download in package

[/sociallocker]

Ok, download the example files and lets start coding !

Step 1. HTML

As usual, we start with the HTML.

This is our main page code.

index.html

<script src="js/jquery.min.js"></script> 
  
<script src="js/jquery.easing.1.3.js"></script> 
  
<script src="js/main.js"></script> 
  
<link rel="stylesheet" href="templates/css/main.css" type="text/css" /> 
  
<div class="animation_example"> 
  
    <h3><a href="#">Animation in jQuery</a></h3> 
  
    <div> 
  
        <div style="margin-bottom:10px;"> 
  
            <h4>Sample object:</h4> 
  
            <div class="example_keeper"> 
  
                <img id="example" src="files/image.jpg"/> 
  
            </div> 
  
            <div class="actions"> 
  
                <input type="radio" value="width" checked name="action" class="action"> Changing width 
  
                <input type="radio" value="position" name="action" class="action"> Changing position 
  
                <input type="radio" value="opacity" name="action" class="action"> Changing opacity 
  
                <select class="selector"></select> 
  
            </div> 
  
        </div> 
  
        <p> 
  
            <b>An example of animations.</b> I made 3 different types of animations: changing size (width), position and opacity. Also I pull all possible effects of easing into Select element. Just choose necessary type and select effect to get demonstration. Try it! 
  
        </p> 
  
    </div> 
  
</div>

Step 2. CSS

Here are used CSS styles.

templates/css/main.css

body{background:#eee;font-family:Verdana, Helvetica, Arial, sans-serif;margin:0;padding:0} 
  
.animation_example{background:#FFF;width:865px;font-size:80%;border:1px #000 solid;margin:0.5em 10% 0.5em;padding:1em 2em 2em;-moz-border-radius: 3px;-webkit-border-radius: 3px} 
  
.actions{margin:10px 0} 
  
.example_keeper{overflow: hidden;width:100%;height:520px;border:1px solid #DDD;background-color:#eee}

Step 3. JS

Here are necessary JS files to our project.

js/main.js

$(document).ready(function() { 
  
    var sel1 = $(".selector"); 
  
    for (x in jQuery.easing) { // collecting all possible methods of easing 
  
        sel1.append($('<option>').attr('value', x).text(x)); 
  
    } 
  
    sel1.change(function(){ 
  
        var method = $(this).val(); 
  
        var effect = $('input[name=action]:checked').val(); 
  
        switch (effect) { 
  
            case 'width': 
  
                $('#example').animate({width:512}, {duration: 1000, easing: method}) 
  
                    .animate({width:256}, {duration: 1000, easing: method}); 
  
                break; 
  
            case 'position': 
  
                $('#example').animate({marginLeft:256}, {duration: 1000, easing: method}) 
  
                    .animate({marginLeft:0}, {duration: 1000, easing: method}); 
  
                break; 
  
            case 'opacity': 
  
                $('#example').animate({opacity:0}, {duration: 1000, easing: method}) 
  
                    .animate({opacity:1}, {duration: 1000, easing: method}); 
  
                break; 
  
        } 
  
    }); 
  
});