我的jQuery的動畫不工作

Question

我在jQuery的 初學者，我不知道爲什麼我的動畫不工作 這是我的腳本 我還的情況下，創造了一個小提琴有什麼不對我的CSS 鏈接我fiddle

$(document).ready(function(){ 
    $("#next").on('click',function(){ 
     var block=$("#moving_box1"); 
     block.animate({left:250px},"slow","linear",function(){ 
      alert("yehi"); 
     }); 
    }); 
}); 

Answer 1

我已經找到了問題。問題是你的<div id="#next">用<div id="next">代替。另外在jQuery中，您還沒有添加報價'left': '250px'，所以我也添加了這個。

我已經更新代碼。請點擊這裏：

$(document).ready(function(){ 
 
$("#next").on('click',function(){ 
 
    var block=$("#moving_box1"); 
 
    block.animate({'left': '250px'},"slow","linear",function(){ 
 
     alert("yehi"); 
 
    }); 
 
}); 
 
});

#box{ 
 
\t display:block; 
 
\t width:1060px; 
 
\t align:center; 
 
\t height:400px; 
 
\t padding:2px; 
 
\t margin:2px; 
 
\t border:1px solid red; 
 
\t 
 
\t 
 
} 
 
#moving_box1{ 
 
\t display:block; 
 
\t position:relative; 
 
\t left:0px; 
 
\t width:300px; 
 
\t height:350px; 
 
\t padding:2px; 
 
\t margin:4px; 
 
\t border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="box"> 
 
<div id="moving_box1"> 
 
</div> 
 
<div id="next"> 
 
<p>Next</p> 
 
</div> 
 
</div>