Animate your message boxes with jQuery
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?
More articles in
Blog archive or
elsewhere