jQuery的動畫不會點擊

Question

<script> 

    var swidth = $(window).width(); 
    var sheight = $(window).height(); 

    $(document).ready(function(){ 


     $("#box").animate({ //animates depending on screen size 

      top: (sheight*0.22)+"px", 
      left: (swidth*0.25)+"px", 
      width:(swidth*0.3)-40+"px", 
      height: (sheight*0.35)-40+"px", 

     }, 2000, function(){ 

      $('<input type="button" value="My button">').appendTo(this) 
      .click(function(){ 

       $(this).animate({ // reverses animation back to original size and location 


       top: "150px", 
       left: "100px", 
       width:"1px", 
       height: "1px", 

       }, 2000,) 

      }); 
     }); 


    }); 

</script> 

如果我更換後工作...

  $(this).animate({ // reverses animation back to original size and location 


      top: "150px", 
      left: "100px", 
      width:"1px", 
      height: "1px", 

      }, 2000,) 

...與...

alert("You clicked me!"); 

...它的工作原理。所以錯誤在反向動畫的某處。但是哪裏？提前感謝任何答案！

Answer 1

好像有2個問題在這裏

1. 額外的語法問題，
2. 您設置動畫的錯誤的元素，在註冊到按鈕this指向點擊按鈕單擊處理程序，但你需要動畫#box元素是按鈕的父元素

嘗試

$(document).ready(function(){ 
    $("#box").animate({ 
     top: (sheight*0.22)+"px", 
     left: (swidth*0.25)+"px", 
     width:(swidth*0.3)-40+"px", 
     height: (sheight*0.35)-40+"px", 
    }, 2000, function(){ 
     $('<input type="button" value="My button">').appendTo(this).click(function(){ 
      $(this).parent().animate({ //you need to animate the parent element #box, here this is the button you clicked 
       top: "150px", 
       left: "100px", 
       width:"1px", 
       height: "1px", 
      }, 2000) //additional , here 

     }); 
    }); 
}); 

Answer 2

你已經在你的animate方法得到了流氓「」。你是對的，現在得到這個錯誤，如果你現在檢查您的控制檯：

Uncaught SyntaxError: Unexpected token) 

變化：

}, 2000,) //last line of the animate method 

到

}, 2000) 

和

height: "1px", 

到

height: "1px" 

如果你正在試圖與ID box動畫後面的元素，你會更好保持你的click出animate，像這樣：

$("#box").on("click", "input[type=button]", function() { 
    $(this).parent("#box").animate({ //use parent 
     top: "150px", 
     left: "100px", 
     width: "1px", 
     height: "1px" 
    }, 2000); 
}); 

然後，在回調，

$('<input type="button" value="My button">').appendTo(this);