动画部分有效但不完全

Question

在我有这个的时刻,当鼠标悬停在容器DIV上时,一个小DIV从容器DIV的顶部滑入中心; 但是在mouseout上,它会滑回到它来自的地方.我想做的是让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;
}

Answer 1

只有当每个人都相信它不会只与css一起工作时:

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

我使用了一个用于mouseenter的动画和一个用于mouseleave的转换器

编辑:添加了firefox修复

编辑:说明:(
我总是使用-webkit- -prefixes,只是为了在Chrome和Safari中解释它,Firefox使用-moz- -prefix,opera -o- - 前缀)

当没有任何反应时:
块位于div.blocks(top:80px;)的底部,不透明度为0,也没有动画运行

悬停时:
块在没有转换的情况下瞬间移动到顶部(请参阅:) -webkit-transition: none;,因为动画down-1正在运行.该动画将块移动top:0到top:40px;.25秒.在动画之后,块保持不变,top:40px;因为这是我添加的内容.blocks:hover .blocks_title.

当mousleaving:
没有动画运行,但由于.块从.25s 移动top:40px到top:80px;.25s-webkit-transition: all .25s;