Animation effect using jQuery


Query is not only useful for the basic work that we do using JavaScript but also for giving outstanding animation effect. In this tutorials, I will try to show how to use jQuery functions to animate the html elements.

How to show/hide an element

To simply show and hide element, we can use show() and hide() method of the jQuery. There are several parameter that can be passed in these two methods in order to give special effect. These parameters can are:

  • slow
  • normal
  • fast
  • Any numeric digit (number of milliseconds to run the animation)

If we do not pass any parameter to these functions, it act instantly.
In the 2nd button click event, you can see that I have not passsed any parameter to the hide() function, so it will not animatte while hiding the element.
In the click event of last two buttons, I have passed 3000 as parameter so while showing and hidding the animation duration will be 3000 milliseconds.If we want to toggle display an html element, we can use toggle() method. We can also pass the same parameter that is applicable to show() and hide() methods.

// jQuery code
<script>
    $(document).ready(function() {

        $("#jbtnShow").click(function() {
            $("#jShow").show("slow");
        })
        $("#jbtnHide").click(function() {
            $("#jShow").hide();
        })

        //---------------
        $("#jbtnShowFast").click(function() {
            $("#jShow").show("fast");
        })
        $("#jbtnHideNormal").click(function() {
            $("#jShow").hide("normal");
        })
        //----------------
        $("#jbtnShowCount").click(function() {
            $("#jShow").show(3000);
        })
        $("#jbtnHideCount").click(function() {
            $("#jShow").hide(3000);
        })

        // -----------------------
        $("#jbtnToggle").click(function() {
            $("#jShow").toggle("slow");
        })     
    })
</script>

// html code
<div id="jShow" style="display:none;">This is the hiddent text</div>
<input type="button" value="Show Text" id="jbtnShow" />
<input type="button" value="Hide Text" id="jbtnHide" /> |
<input type="button" value="Show Fast" id="jbtnShowFast" />
<input type="button" value="Hide Normal" id="jbtnHideNormal" /> |
<input type="button" value="Show by animating 3000 milliseconds" id="jbtnShowCount" />
<input type="button" value="Hide by animating 3000 milliseconds" id="jbtnHideCount" /> |
<input type="button" value="Click to Toggle display" id="jbtnToggle" />

| | |

How to slide display an element

If we want to give a slide effect while showing or hiding the element, we can use slideDown() and slideUp() method respectively. We have freedom to pass the same parameter that is applicable to the show() and hide() method described above, even we can specify the animation duration in milliseconds as we have done above.

If we want to toggle display with slide effect, we can use sliderToggle() method.

// jQuery code
<script>
    $(document).ready(function() {
        $("#jbtnSlideDown").click(function() {
            $("#jdivWelcome").slideDown();
        })
        $("#jbtnSlideUp").click(function() {
            $("#jdivWelcome").slideUp("slow");
        })
        $("#jbtnSlideToggle").click(function() {
            $("#jdivWelcome").slideToggle();
        })            
    })
</script>  

// html code
<div id="jdivWelcome" style="display:none;">
    Welcome to DotNetFunda.com. <br /><br />
    DotNetFunda.Com is a popular Microsoft® technologies related knowledge based website offering articles, tutorials, tips, forums, interview questions, sample projects with source code and other features including online resources, technical jokes, and IT activities around the world. <br /><br />
    Please enjoy your visit and learn and/or share knowledge. Thanks.
</div>
<input type="button" value="Slide Down" id="jbtnSlideDown"/>
<input type="button" value="Slide Up" id="jbtnSlideUp"/>
<input type="button" value="Slide Toggle" id="jbtnSlideToggle"/>
How to give fade in/out effect

If we want to give fade effect to the html element, we can use fadeIn() and fadeOut() method to show and hide the element respectively with fading effect. We can also use slow, normal, fast and number of milliseconds as parameter to these methods as we had used with show() and hide() method above.

If we do not want to fade an element completely, we can use fadeTo(effect, amount) method and pass effect(slow, normal, fast) and amout (numeric value, where 0 is transparent and 1 is opaque) as parameter.

<script>
    $(document).ready(function() {
        $("#btnFadeIn").click(function() {
            $("#jDivFade").fadeIn();
        })

        $("#btnFadeOut").click(function() {
            $("#jDivFade").fadeOut();
        })

        $("#btnFadeLimited").click(function() {
            $("#jDivFade").fadeTo("slow", 0.40);
        })        
    })
</script>

<div id="jDivFade" style="width:300px;height:100px;
    display:none;text-align:center;">You are intelligent !!!</div>
<input type="button" id="btnFadeIn" value="Fade In" />
<input type="button" id="btnFadeOut" value="Fade Out" />
<input type="button" id="btnFadeLimited" value="Fade to Limited amount" />

33 thoughts on “Animation effect using jQuery

  1. I love what you guys tend to be up too. This kind of clever work and coverage!
    Keep up the fantastic works guys I’ve incorporated you guys to our blogroll.

  2. I actually was basically seeking for ideas for my very own web site and located
    your posting, “Animation effect using jQuery | venkat” Window Treatments Ideas
    , would you mind if I personally use several of your concepts?
    I am grateful ,Kelvin

  3. great publish, very informative. I wonder why the opposite specialists of this sector don’t notice this. You should proceed your writing. I am confident, you have a huge readers’ base already!

  4. We turned on the wireless connection on both and checked that they could connect to the internet and worked at a decent pace.
    Uncooked ginkgo biloba seeds have shown some small
    levels of toxins, so if you prefer the seeds it is advised
    to cook them prior to ingestion. Some manufacturers call their product
    a Cover while others use the name Case.

  5. Oh my goodness! Awesome article dude! Many thanks, However I am having problems with your RSS.
    I don’t know the reason why I cannot subscribe to it. Is there anyone else getting identical RSS issues? Anyone that knows the solution can you kindly respond? Thanx!!

  6. We’re a group of volunteers and opening a brand new scheme in our community. Your web site provided us with helpful info to work on. You have performed an impressive job and our entire neighborhood might be grateful to you.

  7. Please let me know if you’re looking for a author for your weblog. You have some really great articles and I feel I would be a good asset. If you ever want to take some of the load off, I’d
    absolutely love to write some articles for your
    blog in exchange for a link back to mine. Please blast me an email
    if interested. Thanks!

  8. hey there and thank you for your info – I’ve definitely picked up anything new from right here. I did however expertise a few technical issues using this website, since I experienced to reload the site lots of times previous to I could get it to load correctly. I had been wondering if your web host is OK? Not that I’m complaining, but sluggish loading instances times will very
    frequently affect your placement in google and can damage your high quality score if
    ads and marketing with Adwords. Anyway I am adding this RSS to my email and could look out for a lot more of your respective exciting content.

    Ensure that you update this again soon.

  9. I’m very pleased to uncover this page. I need to to thank you for your time for this particularly fantastic read!! I definitely appreciated every bit of it and I have you book marked to see new things in your blog.

  10. Hi there, just became aware of your blog through Google, and found that it is truly informative.

    I am going to watch out for brussels. I’ll be grateful if you continue this in future. Lots of people will be benefited from your writing. Cheers!

  11. I think what you said was very reasonable. But, think on
    this, what if you were to write a awesome post title?
    I ain’t suggesting your content isn’t good., however what if you added something that grabbed folk’s attention? I mean Animation effect using jQuery | venkat is kinda vanilla. You ought to look at Yahoo’s home page and watch how they write news titles to get people interested.
    You might add a related video or a related pic
    or two to grab readers excited about what you’ve written. Just my opinion, it would make your posts a little livelier.

  12. Good day very nice web site!! Man .. Excellent .

    . Amazing .. I’ll bookmark your site and take the feeds also? I’m
    happy to seek out numerous useful info here within the post, we need
    develop more techniques on this regard, thanks for sharing.
    . . . . .

  13. Wonderful beat ! I would like to apprentice at
    the same time as you amend your web site,
    how can i subscribe for a weblog web site? The account helped me a appropriate deal.

    I have been tiny bit acquainted of this your broadcast provided
    shiny transparent idea

  14. Good day! I know this is kinda off topic hpwever I’d figured I’d ask.
    Would you be interested in exchanging links oor maybe guest auithoring a blog post or vice-versa?
    My blog discusses a loot of the same subjects as yors and I
    believe we could greatly benefit from ech other. If yoou happen
    too be interested feel free to send me an e-mail.

    I look forward to heafing from you! Excellent bloog by the way!

  15. Just put your cooking pans and frying pans into the proper section of you dishwashing machineand let the burst of water rinse them so powerfully without any
    traces of mess and oil left. This means wanting to constantly learn more about fine foods and wines.

    It is not fun to try to clean bread dough off the bottom of a mixer.

  16. Please let me know if you’re looking for a writer for your weblog.

    You have some really great posts and I think I would be a good asset.
    If you ever want to take some of the load off, I’d absolutely love to write some articles for your blog in exchange
    for a link back to mine. Please shoot me an email if interested.
    Kudos!

  17. It has got various contractors contact information, these prints
    will serve as a backdrop annd perk up your entire interior.

    To get desired result, you need to buy stuff for your kitchen and
    want tto remove it first before yoou install itt to allow for
    shrinkage or best home repair in jacksonville expansion in your home!
    I krep a cabinet full of attractive candles, becasuse I buy them when I happen to catch them marked down.

  18. Thank you, I have recently been searching for info about this topic
    for a while and yours is the greatest I’ve came upon so
    far. But, what about the bottom line? Are you certain concerning the source?

  19. Its such as you read my mind! You seem to understand so much about this,
    such as you wrote the book in it or something. I think that you simply could do with some % to pressure
    the message house a bit, but other than that, that is great blog.
    A fantastic read. I’ll definitely be back.

  20. Hey there! I know this is somewhat off-topic but I had to ask.
    Does running a well-established blog like yours take a
    lot of work? I am completely new to blogging but I do write in my journal every day.
    I’d like to start a blog so I can easily share my own experience and feelings online.
    Please let me know if you have any ideas or tips for brand new aspiring bloggers.

    Appreciate it!

  21. Asking questions are in fact fastidious thing if
    you are not understanding anything entirely, however this piece of writing presents pleasant understanding
    even.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s