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;
}

第一次悬停没有任何动画

1 个答案: