Effective jQuery Function
jQuery is a JavaScript library designed to give the effect to a web pages on the client-side scripting. It will also give a animation to a web pages.
In this example i have explained the jquery function that will behave differently.
This is another jQuery HTML example. Click on below button and see the effect
Show Fade In Fade Out Fade Toggle Animate
Below is a html code that you can copy and paste within a <body></body> tag
HTML Content
CSS Content
script Content
In this example i have explained the jquery function that will behave differently.
This is another jQuery HTML example. Click on below button and see the effect
Show Fade In Fade Out Fade Toggle Animate
Click it
Below is a html code that you can copy and paste within a <body></body> tag
HTML Content
Below is a css code that you can copy and paste in the header section of code that is between <head></head>This is jQuery HTML
Click it
CSS Content
<style type="text/css"> *{margin:0; padding:0} #demo, #slide{ text-align:center; padding:10px; background-color:#999; border:1px solid #0C6; } #demo{display:none;} .color{color:red;} </style>Below is a jquery script that you can copy and paste in the header section of code that is between <head></head>
script Content
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".hide").click(function(){
$("#demo").hide("slow");
alert("Hiding paragraph");
}
)
$("#show").click(function(){
$("#demo").show("slow");
}
)
$("#fade").click(function(){
$("#demo1").fadeIn(3000);
}
)
$("#fadeout").click(function(){
$("#demo1").fadeOut("slow");
})
$("#fadetoggle").click(function(){
$("#demo1").fadeToggle("slow");
})
$("#slide").click(function(){
$("#demo").css("color","#33F").slideToggle("fast");
})
$("#animate").click(function(){
$("#demo1").animate({
height: '+=150px',
width : '+=150px',
opacity:'0.5',
left:'250px'
})
$("#demo1").animate({fontSize:'52px'},"slow");
});
});
</script>
Post a Comment