Flash style design effects with jQuery.

Today I'll explain the jQuery + Interface Elements' effects that (at the time of writing) are a part of our design.

These two effects, which have been designed to be unobtrusive are for adding some animation effects which was out of the scope of css.

1). Bouncy Content/Main <div>
This is an effect from a Flash template which I liked and adds the bouncy content div effect on page load.

The jQuery code to do this is:

<script type="text/javascript">
$(document).ready(function(){
$('.bouncy').DropInDown(1000, null, 'bounceout');
});
</script>

And the html:

<div class="bouncy">
...Content...
</div>

2). Menu Shakes
The first part of the menu animation is done by CSS by adding a margin-left to the 'a' element on hover. The shake effect from Interface Elements is acivated on 'click' and loads the page once the effect is complete.

Here's the jQuery:

<script type="text/javascript">
$(document).ready(function(){
$(".menu-button").click(function() {
$(this).Shake(1);
});
});
</script>

And the HTML to Shake the element on click:

<a href="/" class="menu-button">Home</a>

Next post I'll cover the CSS animation of the menu buttons.