Question

此刻我有this，当鼠标悬停在容器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正在运行。该动画在.25秒内将块从top:0移动到top:40px;。在动画之后，该块保持在top:40px;，因为这是我在.blocks:hover .blocks_title中添加的内容。

当mousleaving：
没有动画正在运行，但由于top:40px

，块在.25s内从top:80px;移动到-webkit-transition: all .25s;

动画部分有效但不完全

1 个答案: