jquery - 使用没有插件的 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

查询

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

使用 slice 将 paent div 中的所有其他 div 切掉。

对于向下滑动，我尝试使用 follwing div 使用顶部和底部值将其上下移动

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

但它在 chrome 中不起作用，在 firefox 中部分起作用。有没有办法附加平滑的滑动效果，如垂直自动收报机。

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 += 44 因为子 div 的宽度是 40px 和 +4 来弥补边距和边框。

查看代码:

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