Jquery simple functions with examples

Jquery do support the slogan of Write less,do more but,because of its different language format it becomes hard to write it.In Jquery their is no need of creating browser supported codes for each browser while they are supported in major browsers.You can create advanced function using Jquery.So lets see how to create it simple.

Fade In / Fade Out

Snippet

<script>
$(document).ready(function(){
$("#fadebuttonin").click(function(){
$("#fadebuttonout").fadeIn();
$("#div2").fadeIn("slow");
$("#div3").fadeIn(3000);
});
$("#deeo2").click(function(){
$("#div1").fadeOut();
$("#div2").fadeOut("slow");
$("#div3").fadeOut(3000);
});
});
</script>
<button id="fadebuttonin">Click to fade in boxes</button>
<button id="fadebuttonout">Click to fade in boxes</button>
<br><br>
<div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
<div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
<div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>

Result

Slide Up / Slide Down

Snippet

<script>
$(document).ready(function(){
$("#slidebuttondown").click(function(){
$("#div11").slideDown();
$("#div22").slideDown("slow");
$("#div33").slideDown(3000);
});
$("#slidebuttonup").click(function(){
$("#div11").slideUp();
$("#div22").slideUp("slow");
$("#div33").slideUp(3000);
});
});
</script>
<button id="slidebuttondown">Click to fade in boxes</button>
<button id="slidebuttonup">Click to fade in boxes</button>
<br />
<br />
<div id="div11" style="background-color: red; display: none; height: 80px; width: 80px;">
</div>
<br />
<div id="div22" style="background-color: green; display: none; height: 80px; width: 80px;">
</div>
<br />
<div id="div33" style="background-color: blue; display: none; height: 80px; width: 80px;">
</div>

Result

Animate CSS

Snippet

<script>
$(document).ready(function(){
$("#animateIn").click(function(){
$("#div21").animate({width:'250px'},500);
$("#div31").animate({width:'250px'},1000);
$("#div41").animate({width:'250px'},1500);
});
$("#animateOut").click(function(){
$("#div21").animate({width:'80px'},500);
$("#div31").animate({width:'80px'},1000);
$("#div41").animate({width:'80px'},1500);
});
});
</script>
<button id="animateIn">Click to animate boxes</button>
<button id="animateOut">Click to revert boxes</button>
<br />
<br />
<div id="div21" style="background-color: red; height: 80px; width: 80px;">
</div>
<br />
<div id="div31" style="background-color: green; height: 80px; width: 80px;">
</div>
<br />
<div id="div41" style="background-color: blue; height: 80px; width: 80px;">
</div>