使用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的

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

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

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

但它不在鉻中工作，部分在Firefox中工作。有沒有一種方法可以像垂直滾動條那樣追加平滑滑動效果。

來源

2013-08-01 Raj

檢查其與鉻合作也。 –

@sonusindhu它沒有給滑動效果。 – Raj

hehehe和chrome以及mozilla的效果一樣 –

我會從CSS值中刪除slide。瀏覽器將在您指定的值之間轉換，無論如何這將是一張幻燈片。

爲什麼你用jQuery以不同的方式製作動畫？爲什麼不使用CSS3轉換然後滑出？

來源

2013-08-01 08:21:37 Jared

試過滑出來卻不起作用 – Raj

它只是「不起作用」，所以你什麼都不做？爲什麼不研究CSS3動畫的工作方式，嘗試擺弄你的代碼並找出解決方案？你甚至可能不需要這裏的人幫忙。 – Jared

使用css3和jquery動畫插入和滑出

回答

相關問題