5秒后自动隐藏图像

本文关键字：隐藏 图像 5秒 | 更新日期: 2023-09-27 18:04:08

我有一个gif图像在我的项目。当我点击一个按钮，它应该出现，5秒后，它应该从屏幕上消失。我尝试使用jquery来做到这一点。但是我没有得到输出。我哪里做错了?

下面是我试过的代码:

Jquery:

 $(function () {
        setTimeout(function () { $("#btnEmail").fadeOut(1500); }, 5000)
        $('#btnMail').click(function () {
            $('#btnEmail').show();
            setTimeout(function () { $("#btnEmail").fadeOut(1500); }, 5000)
        })
    })


<asp:LinkButton ID="btnEmail"  runat="server" onclick="btnMail_Click" Visible="false">
   <asp:Image ID="Image8" imageurl="~/Images/email_animation.gif" runat="server" class="box" /> </asp:LinkButton>
 <asp:LinkButton ID="btnMail"  runat="server" Text="Send" onclick="btnMail_Click"/>

btnMail_Click (代码后面):

btnMail.Visible = false;
btnEmail.Visible = true;

5秒后自动隐藏图像

当您使用ASP时。NET控件生成的元素ID会不同。

你应该使用Control。ClientID财产。

获取ASP.NET生成的HTML标记的控件ID。

使用

 $(function () {
    setTimeout(function () {
        $("#<%= btnEmail.ClientID %>").fadeOut(1500);
    }, 5000)
    $('#<%=btnMail.ClientID %>').click(function () {
        $('#<%=btnEmail.ClientID %>').show();
        setTimeout(function () {
            $("#<%=btnEmail.ClientID %>").fadeOut(1500);
        }, 5000)
    })
 })

有可能clientId(元素在浏览器上获得的id)与您提到的id不同。您应该使用ClientId属性来设置控件将在客户端接收的id。

  <asp:LinkButton ClientID="btnEmail"  runat="server" onclick="btnMail_Click" Visible="false">

ClientID on MSDN

你必须给ClientID

$(document).ready(function(){
    $("#<%= btnEmail.ClientID %>").click(function () {
        $("#<%=Image8.ClientID %>").show();
        setTimeout(function () { $("#<%=Image8.ClientID %>").hide()}, 5000)
    })
});

请参考:JSFiddle

相关文章：