<!DOCTYPE html> 

 <html> 

<head> 

<meta charset="UTF-8"> 

<title></title> 

 

<style> 

div{ 

width: 200px; 

height: 100px; 

border: 3px solid coral; 

position: absolute; 

} 

 

 

</style> 



</head> 

<body> 

 

<div >drfghsfgh</div> 

<script type="text/javascript" src="js/jquery-3.2.1.js"></script> 



<script> 

 

  function move() 

  { 

   
 $('div').click(function(){ 

   
 $('div').animate({top:'200px',right:'30px'},1000); 

   
 $('div').animate({left:'200px'},1000); 

   
 }) 

  } 

  $(function(){ 

   
 move(); 

  }) 

   

    

</script> 

</body> 
</html>

//$('div').animate({top:'200px',right:'600px'},1000);
//$('div').animate({top:'200px'},1000);

//必须设置DIV的位置熟悉：绝对位置，否则通过点击DIV不会移动

通过设置DIV的click事件然后在时间函数里面使用$('div').animate （,）这个方法第一个位置参数 该参数是一个数组用{} 包裹起来，第二个参数是移动的时间参数