jQuery 动画，css position 导致的问题

Question

刚学 jQuery，请问为什么大图片加了 position: absolute 后，鼠标移动到达摩身上，小图片会等大图片淡出后，才消失？这样大图片会等小图片消失后向左跳跃。请解释一下 position 导致这个问题的原因

Answer 1

position只是用于定位而已，表示大图片是绝对定位(表示元素在移动位置的时候，是相对于它祖先元素来说)，大图片会等小图片消失后向左跳跃应该是由jq的动画事件控制的，比如通过对鼠标的监听实现：

$("div").hover(function() {
  $("img.small").fadeOut(); // 小图片渐隐
  $("img.big").animate({"right" : "100px"}, "slow"); // 大图片缓慢向左移动100像素
}, function() {
  $("img.small").fadeIn(); // 小图片渐现
  $("img.big").animate({"left" : "100px"}, "slow"); // 大图片缓慢向右移动100像素
})