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

Question

我希望当 div 'content' 达到 animation.css {left: 900px} 的 div 'wrap' 的最大尺寸(退出 div 'wrap')时，div 'content' 也不会像动画那样显示在。我也使用 z-index CSS，但它不能按我的意愿运行。这是我的代码:

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/