jquery - 使 div 内容在 div 包装器中移动动画并在移出 div 包装器时隐藏

Question

我希望当 div 'content' 通过 animation.css{left: 900px} 达到 div 'wrap' 的最大尺寸（走出 div 'wrap'）时，div 'content' 也不会在类似动画的样式中出现。我也使用z-indexCSS，但它不能按照我的意愿运行。这是我的代码：

HTML：

<div id="wrap">
            <div id="content" >these some text</div>
</div>
 

CSS：

#content
{

position:absolute;
background-color:red;
float:left

}
#wrap{
   position:relative;
   width: 900px;
   float: left;
   height: 22px;
   margin:auto;
   border: 2px solid #fff;
}

脚本

$(document).ready(function ()
 {
        var div = $("#content");
    setInterval(function () {
        div.css({ left: '0px' });
       div.animate({ left: 900px }, { duration: 4200 });
            
        }, 5500);
        
});

Answer 1

在animate()您使用的功能中left: 900px。由于 900px 是一个字符串，因此需要在其周围加上引号。或者，或者，您可以只输入900.. jQuery 默认会添加 'px'。

除此之外，它似乎有效，如下所示：

http://jsfiddle.net/YFBG5/