jquery - 用 jquery 移动 div

标签 jquery html css

我正在尝试使用 animate 函数将 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>

最佳答案

它们一起移动是因为它们相对定位,因此当您在其中一个上设置负边距时,另一个会跟随它。如果您希望它们独立,请使用 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>

关于jquery - 用 jquery 移动 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42516507/

相关文章:

javascript - 具有多个参数的复选框函数调用

javascript - 需要帮助以HTML制作标签页

javascript - HTML/JavaScript 中的 ListView

html - 将 Logo 放入我制作的每个网站的页脚的最佳方法是什么?

c# - Win 2003服务器忽略CSS样式

javascript - 单击空白区域时,出现jQuery Mobile怪异空间

jquery - 在 jQuery 中,如何区分程序点击和用户点击?

javascript - 在 CSS 或 javascript 中更改 div 顺序

css - ng2 智能表 : how to use css?

javascript - 跨浏览器 "jump to"/"scroll"textarea