Easily Animate Web Buttons/Objects using jQuery

Date: 08th Sep 2010 Author: admin 13 Comments
Posted in: HTML/CSS, JavaScript, jQuery |Tags: , , , , ,

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:

Live Demo
download in package

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;
        }
    });
});

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

Live Demo
download in package

Conclusion

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

Enjoyed this Post?

    Tweet
   
   

Stay connected with us:

If you enjoyed this article, feel free to share our tutorial with your friends.

2 Comments

    • Issac Maez's Gravatar
    • Seriously happy i found this website, will make sure to take a note of it so i can come to routinely.

    • Astigmatism's Gravatar
    • It is useful to try everything in practice anyway and I like that here it’s always possible to find something new. Greetings from Michigan

3 Trackbacks

  1. Easily Animate Web Buttons/Objects using jQuery | Scriptsnthings.com on September 15, 2010 at 5:46 am
  2. kids toys on October 4, 2010 at 8:38 pm
  3. halifax escorts on November 22, 2010 at 4:54 pm
  4. escort owen sound on November 23, 2010 at 1:51 am
  5. 35 jQuery Animate Tutorials | webdesign14.com on January 27, 2011 at 7:24 am
  6. 35 jQuery Animate Tutorials | webdesign14.com on January 27, 2011 at 7:24 am
  7. 55个 jQuery 动态效果资源 | 百锐网 on May 20, 2011 at 6:35 am
  8. 55 Great jQuery Animation Resources on June 26, 2011 at 1:00 pm
  9. 20 Efectos para jQuery basados en animaciones on June 27, 2011 at 5:27 pm
  10. 22 Useful jQuery Animation Tutorials | AcrisDesign on August 2, 2011 at 9:03 am
  11. 22个有用的JQ动画教程 | uleadesign 领潮社 on December 6, 2011 at 6:17 am

Leave a Reply

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

*

CAPTCHA Image
Refresh Image

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>