滑入和滑出式使用CSS3和jQuery插件沒有

我使用CSS3動畫滑下一個div來有幾集的div的列表。我想實現在一個幻燈片，在這個網站滑出像垂直滾動新聞效應滑入和滑出式使用CSS3和jQuery插件沒有

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的添加上述類一個div對於效果的slideIn

jQuery的

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

使用切片來削減paent div中的所有其他div。

對於向下滑動我試圖用follwing div來它上下移動使用頂部和底部值

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

但它不使用Chrome和Firefox中部分作品。有沒有一種方法可以像垂直滾動條那樣追加平滑滑動效果。

來源

2013-08-01 Jhonny

該解決方案只使用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"});

頂部+ = 44，因爲孩子的div寬度是40像素和4，使爲邊緣和邊界。

檢查碼出在：

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

來源

2013-08-01 08:25:54 zahirdhada

滑入和滑出式使用CSS3和jQuery插件沒有

回答

相關問題