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.

 

Step 1. HTML

As usual, we start with the HTML.

This is our main page code.

index.html

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

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

JavaScript
$(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;
        }
    });
});

js/jquery.easing.1.3.js and js/jquery.min.js

This is common files – jQuery library with addon. No need to give full code of that file here. It always available as a download package

Step 4. Images

Also we need source image for our project:

    
source image
 

Conclusion

Today I told you how using animations in jQuery. Sure that you will happy to use it in your projects. Good luck!