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);
});
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);
});
Those were my two samples. Got some other ideas?
Awesome :) I haven’t used jQuery before — this looks pretty simple though and I like how much control you have over the animation.
Thats great. I’ll be using this. I love the way the message zoom off too
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
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.
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!
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
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?
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
:) wow it’s so nice, i’ll use it.
Very Cool effects!!!
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…
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?
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.
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 :-)
This is what I need to make a site announcement. Thanks for the post.
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.
Very nice piece of work and also very clean code. Loved it.
Thanks mate, thanks for sharing.
Nice job Mr. !!!
Good Job!!! Nice explanation. Thanks for sharing….
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.
greate! i just love u tutorial :)
very tks ! that’s very useful for me ! tks !
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.
Looks really nice !!!
very nice job ! thx
Nice!!!!…i want the full sourcecode!!!!
wow…!!! great…
page saved!
i’ll try to make my own animated message boxes :D
thanks for share :)
nice one!
can you help me, how can it loop forever?
Thank you in advance!!!