動畫部分工作，但不完全

目前我有this，當鼠標懸停在容器DIV上時，從容器DIV的頂部滑動到中心的一個小DIV;但在鼠標懸停的時候，它會回退到它來自哪裏。我想要做的是讓DIV從DIV的另一側滑出，直接在DIV的對面。動畫部分工作，但不完全

這可能只使用CSS？（我用jQuery想象它會更簡單）

<div class="blocks"> 
    <div class="blocks_title"> 
    </div> 
</div> 
<div class="blocks"> 
    <div class="blocks_title"> 
    </div> 
</div> 

.blocks { 
    position: relative; 
    float: left; 
    margin: 20px; 
    width: 100px; 
    height: 100px; 
    border: 1px dotted #333; 
    overflow: hidden; 
} 

.blocks_title { 
    position: relative; 
    width: 20px; 
    height: 20px; 
    top: 0px; 
    left: 40px; 
    background: #333; 
    opacity: 0; 
    -webkit-transition: all .25s; 
     -moz-transition: all .25s; 
      transition: all .25s; 
} 

.blocks:hover .blocks_title { 
    top: 40px; 
    opacity: 1; 
}

來源

2012-08-30 Andy

.25s所以，你不希望的jQuery/JavaScript的？ – Chris

我相信我可以用JQuery來做到這一點，但是很想看看有人可以用CSS來完成這一切。 – Andy

有趣的一個，乍一看沒有，但我想要考慮是否可以用一個巧妙的背景圖像做一些事情來創建它的幻覺 - 但是如果我能想到任何東西，我會很難過去用jQuery;） – efreeman

而就在所有人都相信，這不是僅適用於CSS要去工作：

http://jsfiddle.net/Xkee9/36/

我用了一個動畫的的mouseenter和對於鼠標離開

編輯轉型：加入火狐修復

編輯：說明：
（我總是用-webkit- -prefixes，只是解釋它在Chrome和Safari，Firefox使用的-moz- -prefix，歌劇○ - - 前綴）

當什麼也沒有發生：
塊是在div.blocks（top:80px;），爲0的不透明度的底部，也沒有動畫運行

當懸停：
瞬時到頂部塊移動不經過渡（參見：-webkit-transition: none;），因爲那麼動畫down-1正在運行。該動畫將該塊從top:0移動到top:40px;，長度爲.25s。動畫之後，該塊保持在top:40px;，因爲這是我在.blocks:hover .blocks_title中添加的內容。

當mousleaving：
有沒有動畫運行了，但是從top:40px塊移動到top:80px;在因爲-webkit-transition: all .25s;

來源

2012-08-30 16:29:23 Puyol

不錯，雖然它只適用於Chrome - 不適用於Firefox 14.0.1。 +1，但。 – Chris

現在它可以在Firefox上運行;） – Puyol

看起來不錯 - 如果我可以的話，另一個+1 :) – Chris

動畫部分工作，但不完全

回答

相關問題