1

我正在使用 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 添加上述类以实现幻灯片效果

jQuery

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

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

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

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

但它不适用于 chrome，部分适用于 Firefox。有没有办法像垂直自动收报机一样附加平滑的滑动效果。

4

1 回答 1

0

此解决方案仅使用 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/

于 2013-08-01T08:25:54.890 回答