使用不带插件的css3和jquery滑入和滑出

Question

我使用css3动画将一个div向下滑动到一个只有几个div集的列表中。我试图实现一个幻灯片进和滑出的效果，就像垂直新闻滚动条在这个网站

http://buildinternet.s3.amazonaws.com/projects/totem/index.html

Css

.slidein { 
    animation: slide 1799ms linear; 
    top: 0px; 
    -webkit-animation: slide 1799ms linear;
}    
@keyframes slide {
    0% { top: -100px; }
    100% { top :0px; }
}
@-webkit-keyframes slide {
    0% { top: -100px; }
    100% { top: 0px; }
} 

我使用jquery添加了上面的类来实现slideIn效果，并在前面添加了一个div

Jquery

 $(".parentDiv")
      .prepend('<div class="newdiv slidein"></div>')
      .children().slice(5);

使用slice来减少paent div中的所有其他div。

对于向下滑动，我尝试使用下面的div使用top和bottom值来上下移动它。

$(".existingDivs").css( {"bottom": ""} );
$(".existingDivs").css({"bottom":"90px"});
$(".existingDivs").animate({   
   top: '+= 92'          
},2000);  

但它在chrome中不起作用，在火狐中部分起作用。有没有办法添加平滑的滑动效果，如垂直滚动条。

Answer 1

此解决方案仅使用jQuery而不使用css3动画。

HTML：

<div class="parent"></div>

CSS：

.parent
{
    height: 200px;
    overflow: hidden;
    width: 100px;
    text-align; center;
    position: relative;
}
.child
{
    width: 96px;
    height: 40px;
    margin: 1px;
    position:absolute;
}
div
{
    border: 1px solid black;    
}

JS：

var child = $("<div></div>").addClass("child");
child.css("top","-44px");
$(".child").animate({"top": "+=44"});
$(".parent").prepend(child);
child.animate({"top":"0px"});

top div 44，因为子+=的宽度是40px和+4，以弥补边距和边框。

请在以下位置查看代码：

http://jsfiddle.net/mSRg6/2/