Question

非常基本的问题，我一直试图通过点击一个按钮动画图像，一直在查看本网站上的所有答案，因为这是一个常见的问题，但似乎无法找出原因为什么＆＃39 ;工作......我启用了引导程序。这是代码。如果您提供解决方案，也许您可以告诉我在您的修复中我做错了什么。编程新手，2周前开始，该死的，这个东西很酷！这是代码：

<img id="GBAlexImg" src="GBAlexSm.png" 
style="left:140px;top:120px;position:absolute;opacity:1.0;">

$("#GBAlexAtk").on("click", function(){

    $("#GBAlexImg").animate({height:"300px"}, function(){
        $("#GBAlexImg".animate({left: "100", top: "120"});
            });

<a href="#" id="GBAlexAtk" class="btn btn-primary">Attack</a>

更新：我更改了代码，所以这就是现在的样子。出于某种原因，它仍然没有动画......

画布上加载的图片：

<img id="GBAlexImg" src="GBAlexSm.png" style="left:140px;top:120px;position:absolute;opacity:1.0;">

按钮（通过引导程序）：

<div id="monster1" class="monster-controls">           
        <a id="GBAlexAtk" class="btn btn-primary">Attack</a>
</div>

动画功能：

<script type="text/javascript">

    $(document).ready(function() {

        $('#GBAlexAtk').click(function(){
            $('#GBAlexImg').animate({height:300}, 500, function(){
                $('#GBAlexImg').animate({left:'500', top:'120'}, 500);
            });
        });
    });

</script>

Answer 1

首先，我希望您的JQuery代码放在页面上的“脚本”标记中，而不是像您在帖子中添加的那样。请注意，我有点投射/猜测，因为我还没有看到你的整个HTML。

<script type="text/javascript">
//ADD Jquery code here...
</script>

其次，您需要将JQuery代码包含在JQuery Document Ready事件中。 SOURCE

传递给该方法的处理程序保证在执行之后执行 DOM准备好了，所以这通常是附加所有其他内容的最佳位置事件处理程序并运行其他jQuery代码。

<script type="text/javascript">
    $(function(){
        //ADD Jquery code here...
    });
</script>

接下来，您似乎缺少animate方法的许多参数。你应该read the documentation。请注意，缓动参数不是必需的。

.animate( properties [, duration ] [, easing ] [, complete ] )
Which means :
$("#GBAlexImg").animate({left: "100", top: "120"}, 500, function(){ //OnComplete code });

了解所有这些，您的完整JQuery代码（包含在脚本标记内）应如下所示：

//Document ready
$(function(){
    $('#GBAlexAtk').click(function(){
        $('#GBAlexImg').animate({height:300}, 500, function(){
            $('#GBAlexImg').animate({left:'200', top:'120'}, 500);
        });
    });
});

您可以查看WORKING EXAMPLE

使用jquery中的按钮为图像设置动画

1 个答案: