第一次悬停没有任何动画

Question

当我将鼠标移到 div.box 上时，div.title 会动画化。这是对的。问题是，在第一次悬停时，它会在没有任何动画的情况下到达顶部。第一次悬停后一切正常。

<script src="http://code.jquery.com/jquery-1.7.js"></script>

<style>
    .box { width: 30%; height: 300px; float: left; background: #ccc; position: relative; overflow: hidden; margin-right: 20px; }
    .title { height: 300px; width: 100%; background: #333; position: absolute; bottom: -260px; }
</style>

<script>
    $(document).ready(function(){
        $(".box").hover(function(){
            $(this).find(".title").animate({top:'0px'},300);
        }, function() {
            $(this).find(".title").animate({top:'260px'},300);
        }); 
    });
</script>

<div class="box">
    <div class="title"></div>
</div>

<div class="box">
    <div class="title"></div>
</div>

谁能看出我做错了什么？

jsfiddle

Answer 1

您需要为标题设置初始最高值div。将css改成如下

.title { 
  height: 300px; 
  width: 100%; 
  background: #333; 
  position: absolute; 
  bottom: -260px;
  top: 260px;
}

第一次悬停没有任何动画

First hover goes without any animations

jquery

animation

hover