Just made some jquery effects which is totally simple to use. click here for the demo and download the code below.

The effects ive used are the fade in/ fade out , slide and a combination of the three. The code is very simple which the jquery implies to write less do more.

$(document).ready(function(){

$(“p:#v”).toggle(function(){

$(“.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);

},function(){

$(“.stuff”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);

});

$(“p:#ah”).toggle(function(){

$(“.stuff2″).fadeOut(“slow”);

},function(){

$(“.stuff2″).fadeIn(“slow”);

});

$(“#go”).toggle(function(){

$(“.stuff3″).animate({

width: “70%”,

opacity: 0.1,

marginLeft: “6in”,

fontSize: “3em”,

borderWidth: “10px”

}, 1500 );

},function(){

$(“.stuff3″).animate({

width: “70%”,

opacity: 100,

marginLeft: “0in”,

fontSize: “3em”,

borderWidth: “10px”

}, 1500 );

});

});

Demo | Download the source code

<script type=”text/javascript”>
$(document).ready(function(){
$(“p:#v”).toggle(function(){
$(“.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);
},function(){
$(“.stuff”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);
});
$(“p:#ah”).toggle(function(){
$(“.stuff2″).fadeOut(“slow”);
},function(){
$(“.stuff2″).fadeIn(“slow”);
});
$(“#go”).toggle(function(){
$(“.stuff3″).animate({
width: “70%”,
opacity: 0.1,
marginLeft: “6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
},function(){
$(“.stuff3″).animate({
width: “70%”,
opacity: 100,
marginLeft: “0in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});
</script¬†<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(“p:#v”).toggle(function(){
$(“.stuff”).animate({ height: ‘hide’, opacity: ‘hide’ }, ‘slow’);
},function(){
$(“.stuff”).animate({ height: ‘show’, opacity: ‘show’ }, ‘slow’);
});
$(“p:#ah”).toggle(function(){
$(“.stuff2″).fadeOut(“slow”);
},function(){
$(“.stuff2″).fadeIn(“slow”);
});
$(“#go”).toggle(function(){
$(“.stuff3″).animate({
width: “70%”,
opacity: 0.1,
marginLeft: “6in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
},function(){
$(“.stuff3″).animate({
width: “70%”,
opacity: 100,
marginLeft: “0in”,
fontSize: “3em”,
borderWidth: “10px”
}, 1500 );
});
});
</script>