JQuery Effect in Confluence wiki.

Hello Friends,

This is one of the tutorials regarding the Confluence wiki markup. This is related to adding animation effect on the confluence page. For this one must have the Jquery macro enabled in the confluence.

It is very much simple to add the animation like effect in confluence using various jquery effects. Following is one such example. Just copy the code and paste it into the page, just save it and view the page, animation will work, provided Jquery macro is enabled.

Following is the code snippet for same:
[css]
{jquery:markup=wiki}
{html}
<img id=”imgId” src=”path/imgname.jpg” alt=”” />
<input onclick=”funct1()” type=”button” value=”Toggle” />
<script type=”text/javascript”>
function funct1()
{
$(“#imgId”).hide(“slow”);
$(“#img2Id”).show(“fast”);
$(“#but1”).hide(“fast”);
$(“#but2”).show(“fast”);
}
function funct2()
{
$(“#img2Id”).hide(“slow”);
$(“#imgId”).show(“fast”);
$(“#but2”).hide(“fast”);
$(“#but1”).show(“fast”);
}
</script>
{html}
{jquery}
[/css]
Now once you save this code, you will see something like below~

Hope this will help you.

Thanks,
Nikhil.