Jox Technology

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>