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.

有帮助吗?

解决方案

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

Fiddle demo

其他提示

simply change hoverIntent to hover

$('.button').hover(function(){...
许可以下: CC-BY-SA归因
不隶属于 StackOverflow
scroll top