Blogger Ever

Jquery simple functions with examples

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>

Result 





Conclusion

Jquery is simple,just their is a need to understand it.It makes us to write less but work fine,or superfine.
Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.