<html >
<head >
<title></title>
<script src="Scripts/jquery-2.1.1.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#btnShow").prop("disabled", true);
var c = $(this).click();
if (c == "#btnShow")
$("#btnShow").click(function () {
$("#btnShow").prop("disabled", true);
$("#btnHide").prop("disabled", false);
$("#img1").show(2000);
});
else if(c=="#btnHide")
$("#btnHide").click(function () {
$("#btnShow").prop("disabled", false);
$("#btnHide").prop("disabled", true);
$("#img1").hide(2000);
});
else
$("#btnToggel").click(function () {
$("#btnShow").prop("disabled", true);
$("#btnHide").prop("disabled", true);
$("#img1").toggle(5000);
});
$("#btnFadeIn").click(function () {
$("#img1").fadeIn(3000);
});
$("#btnFadeOut").click(function () {
$("#img1").fadeOut(3000);
});
$("#btnFadeToggle").click(function () {
$("#img1").fadeToggle(3000);
});
$("#btnFadeTo").click(function () {
$("#img1").fadeTo(3000, 0.2);
});
$("#btnSlideUp").click(function () {
$("#img1").slideUp(3000);
});
$("#btnSlideDown").click(function () {
$("#img1").slideDown(3000);
});
$("#btnSlideToggle").click(function () {
$("#img1").slideToggle(3000);
});
});
</script>
<style type="text/css">
#img1 {
width:300px;
height:300px;
border:5px solid green;
}
</style>
</head>
<body>
<form id="form2" runat="server">
<div align="center">
<input type="button" id="btnShow" value="Show" />
<input type="button" id="btnHide" value="Hide" />
<input type="button" id="btnToggel" value="Toggel" />
<input type="button" id="btnFadeIn" value="FadeIn" />
<input type="button" id="btnFadeOut" value="FadeOut" />
<input type="button" id="btnFadeToggle" value="FadeToggle" />
<input type="button" id="btnFadeTo" value="FadeTo" />
<input type="button" id="btnSlideUp" value="SlideUp" />
<input type="button" id="btnSlideDown" value="SlideDown" />
<input type="button" id="btnSlideToggle" value="SlideToggel" />
<br />
<br />
<img id="img1" src="images/mk3.jpg" />
</div>
</form>
</body>
</html>
Output:
No comments:
Post a Comment