动画部分工作，但不完全

目前我有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

动画部分工作，但不完全

回答

相关问题