jquery显示和隐藏图像不起作用答案

【问题标题】：jquery show and hide image not workingjquery显示和隐藏图像不起作用
【发布时间】：2012-11-01 17:17:03
【问题描述】：

我的某个页面有一个代码。当有人单击单选按钮时，它应该淡入、停留和淡出图像。此外，数据库将使用 ajax onclick 进行更新。

<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>

为了避免混淆，我删除了 ajax 部分。这是我使用的 jsFiddle。 http://jsfiddle.net/c7ajb/1/可能是什么错误？

【问题讨论】：

标签： javascript jquery image radio-button show-hide

【解决方案1】：

<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>

【讨论】：

【解决方案2】：

将delay/fadeOut 放在fadeIn 函数的回调中（或链接其他答案中建议的方法）：

$("#rad").click(function () {
    $("#success").fadeIn(500, function() {
        $(this).delay(1000).fadeOut(1000);
    });
});

Demo here

【讨论】：

【解决方案3】：

这是有效的：

$("#rad").click(function () {
    $("#success").fadeIn(500).delay(1000).fadeOut(1000);
});

Javascript 有时可以是异步的，如果你不这样做，delay() 将无法工作。

您还应该使用回调来实现更好的代码演化。

【讨论】：