Jquery Show And Hide Image Not Working
I have a code to one of my pages. It's supposed to fade in, stay and fade out an image when someone clicks a radio button. Also the database is to be updated onclick using ajax. &
Solution 1:
This is working :
$("#rad").click(function () {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
});
Javascript can sometime be asynchronous, if you don't do it this way, delay() will not work.
You should also use callback for a better code evolution.
Solution 2:
Put the delay/fadeOut in the callback of the fadeIn function (or chain the methods as suggested in the other answer):
$("#rad").click(function () {
$("#success").fadeIn(500, function() {
$(this).delay(1000).fadeOut(1000);
});
});
Solution 3:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
$(".radios").click(function() {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
})
});
function upimg1(){}
function upimg2(){}
function upimg3(){}
</script>
</head>
<body>
<table class="profimg">
<tr>
<td height="50" width="50">
<img id="success" src="http://cdn4.iconfinder.com/data/icons/simplicio/128x128/notification_done.png" style="display:none" height="50" width="50">
</td>
</tr>
<tr>
<td align="center">
<img class="profimg" src="" alt="Administratorasdf" height="100" width="100"/>
</td></tr>
<tr>
<td id="rad" align="center">
<input class="radios" type='radio' title='Publicly Visible' name='img_pub' onClick="upimg1()" />
<input class="radios" type='radio' title='Visible Only To Users' value='UsersOnly' name='img_pub' onClick="upimg2()" />
<input class="radios" type='radio' title='Visible Only To You' value='Hide' name='img_pub' onClick="upimg3()" checked='checked'/>
</td>
</tr>
</table>
</body>
Post a Comment for "Jquery Show And Hide Image Not Working"