Question

我想在点击按钮时慢慢显示隐藏div onclick jquery。这个div将有来自数据库的结果。我希望它以慢动作打开时打开。

    <head runat="server">
    <title></title>
   <script src="script/jquery-1.11.1.min.js" type="text/javascript"></script>

   <script src="script/jquery-1.11.1.min.js">

       $(document).ready(function () {
           $("#Button1").click(function () {
               $("#showdivslowly").slideDown('slow');
           });
       });

   </script>
</head>

<body>
    <form id="form1" runat="server">

    <div runat="server" id="showdivslowly" style="width:500px; height:200px; background-color:Blue" visible="false">Welcome</div>

    <asp:Button ID="Button1"  runat="server"  Text="Button" />

    </form>
</body>

Answer 1

使用jQuery的toggle功能：

<script>
$(document).ready(function () {
   $("#Button1").click(function () {
        $("#showdivslowly").toggle("slow");
   });
});
</script>

切换功能用于显示div是否为隐藏，如果可见则隐藏。

你也可以用秒来传递时间而不是＆＃34;慢＆＃34;。

Answer 2

少数事情：

您无法在src标记中设置script，然后在其中设置script - 必须将其关闭：

您的按钮具有服务器生成的ID（由runat="server"引起） - 因此您需要使用ClientID

您的div不需要包含runat="server" - 我怀疑您只是为Visible="false属性执行此操作。相反，使用CSS

slideDown也需要一些时间（以毫秒为单位）作为参数

<script src="script/jquery-1.11.1.min.js"></script>
<script>

   $(document).ready(function () {
       $("#<%=Button1.ClientID%>").click(function () {
           $("#showdivslowly").slideDown(2000);
       });
   });

</script>

<div id="showdivslowly" style="width:500px; height:200px; background-color:Blue; display: none;">Welcome</div>

当我点击按钮时，show hide div onclick jquery

2 个答案: