jquery中的animate（）如何影响页面流和溢出属性？ 嘿，伙计们，我刚刚读完了我的第一个XHTML/CSS书，现在正处于一个JavaScript／HTML的中间。我想制作一个非常简单的效果，但无法理解，因为我不熟悉jquery（以及javascript）

所以我想要这样的效果：

图像四处移动，但其边框周围有一种“遮罩”，因此其支架固定到位，但图像移动（鼠标悬停）。一旦鼠标光标没有悬停在图像上，图像应该恢复到原来的位置，但这似乎很简单。现在我只是想弄清楚如何制作这个面具。。。。使用静态图像和

overflow:hidden

属性就足够简单了，但是我认为

animate（）

会将元素从流或其他东西中移除，因为我无法使溢出生效。也许它也与位置属性有关

这是我的密码：

CSS:

}

脚本：

    <script src="jquery-1.7.2.js"></script>
<script>
$(document).ready(function(){

$("#clickme").click(function() {
   $("#book").animate({

    left: '+=150',

  } 
 });

$（文档）.ready（函数（）{
$（“#单击我”）。单击（函数（）{
$（“#书”）。制作动画({
左：'+=150'，
} 
});

正文：

点击这里

所以…它确实有动画，但溢出属性不起作用。当我取出脚本时，溢出属性起作用，但显然动画不起作用

overflow: hidden 

仅适用于您的情况，当父对象的位置也是绝对位置时。还要注意@Sparky672的注释。图像必须位于div内

我已经为您设置了一个演示：

---

更新了JSFIDLE以移动悬停图像并清理CSS

如果您希望图像比容器大，并且希望图像的一部分被隐藏，然后当您将鼠标悬停在该区域上时移动到视图中，则需要将图像置于容器中

---

需要将容器定位为相对位置的原因是为了制作内部元素（img）默认情况下，绝对定位的元素会从文档流中取出，并相对于窗口而不是包含元素定位，除非包含元素是相对定位的（absolute也可以工作，但是该元素不再出现在文档流中。）

请创建一个JSFIDLE演示。根据您的HTML，不会出现“溢出”对于图像。

overflow

属性将应用于

img

的父容器，并且我在您的代码中没有看到图像周围的容器。感谢您的帮助。我之前尝试过添加容器，但这似乎也不起作用。因此，当我添加那些css行时，JS代码根本不会运行…我很抱歉现在试着玩弄它，看看我在这里遗漏了什么。好吧，我不确定为什么它在JSFIDLE上不起作用，但我已经让它起作用了。关键是使#book div相对，而容器绝对。别问我它是如何工作的，lol。我正在试着弄清楚。最后一步是让它在单击时不那么急促。我必须重新阅读你的解释我一遍又一遍地感谢你！

<div id="clickme">
  Click here
</div>
<image id="book" src="../Images/test.jpg"  (Newbs cant post images so I didnt use IMG)
   />

overflow: hidden