動畫按鈕高度和寬度懸停 - mouseleave不工作

這是我的按鈕，裏面有信息。的信息的div是顯示無：動畫按鈕高度和寬度懸停 - mouseleave不工作

<div class="button"> 
<h2>Information</h2> 
<div class="information"> 
    <p>This is the information text</p> 
    <p>This is the information text</p> 
</div>

p, h2 { 
padding: 0; 
margin: 0; 
} 

.button { 
background: red; 
width: 150px; 
height: 40px; 
} 

.information { 
display: none; 
}

當我懸停按鈕，我想動畫其寬度的高度，並且其中工作正常的信息的div褪色。在鼠標離開信息的div應展示沒有再次和按鈕DIV應該爲動感它的起點寬度和高度：

$('.button').hoverIntent(function(){ 
    $(this).animate({ 
     width: 400, 
     height: 220 
    }, 800, function() { 
     $('.button').find('.information').fadeIn(); 
     $('.button').mouseleave(function(){ 
      $('.button').find('.information').fadeOut(200); 
      $(this).animate({ 
       width: 150, 
       height: 40 
      }, 500, function() { 
       // Animation complete 
      }); 
     }); 
    }); 
});

能否請你幫我的代碼？我真的不知道我做錯了什麼。

這裏是的jsfiddle相同的代碼： http://jsfiddle.net/6WpCk/2/

謝謝。

來源

2014-02-18 schlawunzius