Animate your message boxes with jQuery

December 13, 2008

A few months ago I posted an article on creating message boxes. No question, you should really take care about it. But this time I want to make fun with it and add some animations using (you guess) jQuery.

The idea is more than simple. Let’s animate message box that is being shown, and blow it away after we read it.

So this would be the HTML markup:

<div id="info">
    This is an animated info message. Do you see it? <a href="#" class="close">Now click here to make it go away!</a>
</div>

And nothing more. We’ll need some CSS to meke it looks like something, just like in the article I mentioned earlier:

#info{
    border: 1px solid;
    margin: 10px 0px;
    padding:15px 10px 15px 50px;
    background-repeat: no-repeat;
    background-position: 10px center;
    position:relative;
    color: #00529B;
    background-color: #BDE5F8;
    background-image: url('info.png');
}

Cool. Now let’s animate this. Although there are plenty of possibilities, I will show you just two. But I’d like you to experiment and try acheve various effects.

Blink effect

Ok, this one is pretty simple. The message will blink a few times just to let you know you should read it. Here is the code:

 $(document).ready(function(){
    $(".close").click(function(){
        $("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
    });
    $("#info").fadeOut(800).fadeIn(800).fadeOut(400).fadeIn(400)
    .fadeOut(400).fadeIn(400);
});

View the demo

Nuge effect

Do you use MSN Messanger? You know how the chat window behaves when you send “nudge” to your colleague? We are going to do the same. Here is the code:

 $(document).ready(function(){
    $(".close").click(function(){
        $("#info").animate({left:"+=10px"}).animate({left:"-5000px"});
    });
    $("#info").animate({left:"+=5px"},40).animate({top:"+=5px"},40)
    .animate({top:"-=10px"},40).animate({left:"-=10px"},40)
    .animate({top:"+=5px"},40).animate({left:"+=5px"},40)
    .animate({left:"+=5px"},40).animate({top:"+=5px"},40)
    .animate({top:"-=10px"},40).animate({left:"-=10px"},40)
    .animate({top:"+=5px"},40).animate({left:"+=5px"},40);
});

View the demo

Those were my two samples. Got some other ideas?

Let's discuss this on twitter.

28 Comments

  • Dmitry (December 13, 2008)

    Awesome :) I haven’t used jQuery before — this looks pretty simple though and I like how much control you have over the animation.

  • Andy (December 13, 2008)

    Thats great. I’ll be using this. I love the way the message zoom off too

  • Patrick (December 13, 2008)

    I like the idea behind it, but I think it could be very annoying for the user.

    A suggestion – when you make it go away, you make it slide up too so that there’s no giant gap where the message box was

  • Janko (December 13, 2008)

    Dmitry, jQuery is really amazing. I made some interesting effects using jQuery animations in a few of my latest projects.

    Andy: yes, zoom off looks fine :-)

    Patrick: It might be annoying if you overdo it. Regarding the gap – it’s because message box has position:relative in the samples.

  • Marco (December 13, 2008)

    I’ve been messin’ around with jQuery too lately, and I must say, I really like it. Will write an article about it too (when I have time).

    Anyway, I do agree with Patrick: The "blink" effect is too distracting (reminds me of the html <blink> tag). The nudge (You made a typo in the article -> "Nuge") effect is pretty cute, but it’s better to have it when the user makes an action, otherwise it would be too much of an advertising idea.

    Thanks for sharing the info!

  • Crealup (December 14, 2008)

    Very nice idea! I used something similar in the past, but not implemented like you have done.
    It deserves to go in my delicious

    PS. I can’t see what I am typing in the comment fields with google bar autofill on :p

  • Janko (December 15, 2008)

    Marco: hm, I think <blink> tag was just to rough, I wouldn’t compare these with jQuery. As I said, you could create awesome effect as long as you don’t overdo it.

    Crealup: Thanks! What’s the trick with google bar, why can’t you see the text?

  • TweeZz (December 15, 2008)

    I’m using jQuery’s cousin; prototype. (http://prototypejs.org/)
    Prototype has a library build on top of it which has a bunch of pre defined animations in it. Maybe there you can get some more ideas…
    http://github.com/madrobby/scriptaculous/wikis/combination-effects-demo

  • panjur kepenk (December 15, 2008)

    :) wow it’s so nice, i’ll use it.

  • Christian (December 15, 2008)

    Very Cool effects!!!

  • Daniel Cavalcante (December 15, 2008)

    jQuery is amazing: simple, short and effective. As for nudging, adobe spry’s shake effect has a more sophisticated approach that is so much more aesthetic pleasing…

  • omBRE (December 15, 2008)

    Nice script. jQuery rulez.

    Hey Janko, is there a reason why you are using jquery 1.2.3 in your demo scripts? You think its faster, smaller… or just a legacy?

  • Jin (December 15, 2008)

    JQuery is butter. It has a lot of useful features other than animation effects too. I use it to launch new browser window without using "target" for xhtml strict compliance.

  • Janko (December 15, 2008)

    TweeZz: Thanks for the links. I so in love with jQuery that I can’t image using any other library. At leas not soon :-)

    Panjur, Christian: Thanks.

    Daniel: I have to check adobe spry’s shake effect, haven’t seen it before

    omBRE: I made this example earlier, just forgot to use 1.2.6. I didn’t notice that, thanks

    Jin: Totally agree! I involved jQuery so much in my projects that I don’t know how would I even work without it :-)

  • Pink (December 16, 2008)

    This is what I need to make a site announcement. Thanks for the post.

  • Webdesign Meppel (December 23, 2008)

    Nice usage of jQuery but I agree with what is said before. It might be quite annoying for your visitors. I don’t think it’s very functional.

  • Acmeous Web Technology Blog (December 26, 2008)

    Very nice piece of work and also very clean code. Loved it.
    Thanks mate, thanks for sharing.

  • Daniel (December 28, 2008)

    Nice job Mr. !!!

  • DotNetSpark (January 26, 2009)

    Good Job!!! Nice explanation. Thanks for sharing….

  • xXKronosXx (February 5, 2009)

    Oh I love jQuery, it’s really better and faster as Scriptacolous or Prototype – at least since it’s newest version 1.3.1. So thank’s a lot for your scripts here.

  • Caina (February 25, 2009)

    greate! i just love u tutorial :)

  • david lin (March 10, 2009)

    very tks ! that’s very useful for me ! tks !

  • dario-g (April 5, 2009)

    That’s great. I added one function more: .animate({left:"+=10px"}).animate({left:"-5000px"}, function(){ $(d).slideUp(); });

    After that content slides up and covers empty space.

  • Issa Qandil (April 14, 2009)

    Looks really nice !!!

  • Webdesign (April 29, 2009)

    very nice job ! thx

  • Shyama A B (July 16, 2009)

    Nice!!!!…i want the full sourcecode!!!!

  • Syahuri (November 7, 2009)

    wow…!!! great…

    page saved!

    i’ll try to make my own animated message boxes :D

    thanks for share :)

  • nikola (February 3, 2010)

    nice one!

    can you help me, how can it loop forever?

    Thank you in advance!!!