Question

我想在单击按钮时使用jQuery为div设置动画。当我单击按钮时，什么也没有发生。目前在ASP.NET母版页中有。

<head runat="server">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnOne").click(function () {
                $("#blockDiv").animate({ left: '250px' });
                $("#blockDiv").animate({ down: '250px' });
                $("#blockDiv").animate({ right: '250px' });
                $("#blockDiv").animate({ up: '250px' });
            });
        });
    </script> 
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>

在另一个页面中，我有按钮的声明以及要设置动画的div ...

<asp:Button ID="btnOne" Text ="Click Me!" runat="server" /><br/><br/>
<div id="blockDiv" style="width:100px;height:100px;background-color:gold;"/><br>

我不确定为什么这行不通，也许我不应该在母版页的开头使用JavaScript？这是我第一次使用母版页和jQuery，所以我可能偏离了100％。

Answer 1

CSS属性发生了变化

错误

 $("#blockDiv").animate({ left: '250px' });
 $("#blockDiv").animate({ down: '250px' });
 $("#blockDiv").animate({ right: '250px' });
 $("#blockDiv").animate({ up: '250px' });

正确

 $("#blockDiv").animate({ left: '250px' });
 $("#blockDiv").animate({ bottom: '250px' });
 $("#blockDiv").animate({ right: '250px' });
 $("#blockDiv").animate({ top: '250px' });

无法使jQuery动画与ASP.NET母版一起使用

1 个答案: