Sun Dec 30, 2012 12:23 am
<html>
<head>
<title>Fade-In, Fade-out and Fade-toggle</title>
<script src="jquery-1.8.3.js"></script>
<script>
// Waits until the all document is loaded.
$(document).ready(function(){
// fade-In elements with different speed.
$("#fadeIn").click(function(){
$("#fade1").fadeIn(2000);
$("#fade2").fadeIn(500);
$("#fade3").fadeIn(1000);
$("#fade4").fadeIn(3000);
});
// fade-Out elements with different speed.
$("#fadeOut").click(function(){
$("#fade1").fadeOut(900);
$("#fade2").fadeOut(4000);
$("#fade3").fadeOut(1000);
$("#fade4").fadeOut(3000);
});
// apply fade-toggle action with different speed.
$("#toggle").click(function(){
$("#toggle1").fadeToggle(3300);
$("#toggle2").fadeToggle(3300);
});
});
</script>
</head>
<body>
<p id="fade1">This paragraph includes part-one.</p>
<p id="fade2">This paragraph includes part-two.</p>
<input id="fade3" type="text"/>
<p id="fade4">This paragraph includes part-three.</p>
<p id="toggle1">This paragraph includes part-four.</p>
<p id="toggle2" hidden="true" >This paragraph includes part-five.</p>
<button id="fadeIn">Fade-In</button>
<button id="fadeOut">Fade-Out</button>
<button id="toggle">Fade-Toggle</button>
</body>
</html>
Codemiles.com is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com
Powered by phpBB © phpBB Group.