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/