Первый наведение идет без анимации

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

Вам необходимо установить начальное верхнее значение для заголовка дел. Измените css следующим образом:

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