animate button height and width on hover - mouseleave not working

Question

This is my button with information inside. The information div is on display none:

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

When I hover the button, I want to animate its width an height and fade in the information div which is working fine. On mouseleave the information div shall be on display none again and the button div should be animated to its beginning width and height:

$('.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
            });
        });
    });
});

Could you please help me with my code? I really don't no what I am doing wrong.

Here is the same code on JSFiddle: http://jsfiddle.net/6WpCk/2/

Thank You.

Answer 1

Here's my pure Javascript suggest to you, I think it's easier, using onmouseover and onmouseout with simple functions.

Fiddle demo

Answer 2

simply change hoverIntent to hover

$('.button').hover(function(){...