jquery - 使用 jquery 移动 div

Question

我正在尝试使用动画功能将一个 div 移出屏幕顶部，并在完成后引入另一个带有回调的 div。两个 div 一起移动，我不能让它们分开移动。即使将另一个 div 排除在我的函数之外，它仍然会移动两个。谢谢!

  $('#move').hover(function() {
        $(this).animate(
        {
            marginTop: '-500px'
                },
        2000,
         function(){

        }
           ); // end animate     
      }); // end hover      



    <div id="moveup">
  move up
    </div>

   <div id="moveright"> 
move right
    </div>

Answer 1

它们一起移动是因为它们是相对定位的，因此当您在一个上设置负边距时，另一个也会随之移动。如果您希望它们独立，请使用 position:absolute;

将它们从文档流中移除

$('#moveup').hover(function() {
  $(this).animate({
    marginTop: '-20px'
  },500,function(){

  }); // end animate     
}); // end hover

#moveup, #moveright {
  position:absolute;
}
#moveup {
  top:50px;
}
#moveright {
  top:100px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="moveup">move up</div>

<div id="moveright">move right</div>