javascript - mostrar - jquery show y ocultar imagen no funciona
mostrar y ocultar div con el mismo boton jquery (3)
Tengo un código para una de mis páginas. Se supone que se desvanece, se queda y se desvanece una imagen cuando alguien hace clic en un botón de radio. Además, la base de datos se actualizará haciendo clic en ajax.
<html>
<body>
<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">
$("#rad").click(function() {
$("#success").fadeIn(500);
$("#success").delay(1000);
$("#success").fadeOut(1000);
})
</script>
<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 type=''radio'' title=''Publicly Visible'' name=''img_pub'' onclick="upimg1()" /> <input type=''radio'' title=''Visible Only To Users'' value=''UsersOnly'' name=''img_pub'' onclick="upimg2()" /> <input type=''radio'' title=''Visible Only To You'' value=''Hide'' name=''img_pub'' onclick="upimg3()" checked=''checked''/></td></tr>
</table>
</body>
</html>
Eliminé la parte ajax para evitar confusiones. Este es el jsFiddle que utilicé. http://jsfiddle.net/c7ajb/1/ ¿Cuál podría ser el error?
Ponga el delay / fadeOut en la devolución de llamada de la función fadeIn (o fadeIn los métodos como se sugiere en la otra respuesta):
$("#rad").click(function () {
$("#success").fadeIn(500, function() {
$(this).delay(1000).fadeOut(1000);
});
});
<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>
Esto está funcionando:
$("#rad").click(function () {
$("#success").fadeIn(500).delay(1000).fadeOut(1000);
});
JavaScript puede ser asincrónico algunas veces, si no lo haces de esta manera, el delay() no funcionará.
También debería usar la devolución de llamada para una mejor evolución del código.