Анимация изображения с помощью кнопки в jquery

Question

Довольно простой вопрос, я пытаюсь оживить изображение, нажав кнопку, просматривал все ответы на этом сайте с его общего вопроса, но, похоже, не может найти почему он не работает ... У меня включен bootstrap. Вот код. Если вы предоставляете решение, возможно, вы можете сказать мне, что я сделал неправильно в вашем исправлении. Новое для программирования, началось 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 будет помещен в тег 'script' на странице, а не как вы в вашем посте. Обратите внимание, что я проецирую/угадываю, так как я не видел весь ваш html.

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

Во-вторых, вам нужно приложить код JQuery внутри события JQuery документа Ready. SOURCE

Обработчика передается метод гарантированно будет выполняться после того, как DOM готовы, так что это, как правило, лучшее место, чтобы приложить все другие обработчиков событий и запустить другой код JQuery.

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

Далее, вы, кажется, не хватает много параметров для метода одушевленным. Вы должны 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