Question

这是我的按钮，里面有信息。信息div显示为无：

<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，这样可以正常工作。在mouseleave上，信息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/

谢谢。

Answer 1

只需将hoverIntent更改为悬停

即可

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

Answer 2

这是我的纯Javascript建议给你，我认为使用onmouseover和onmouseout使用简单的函数会更容易。

Fiddle demo

悬停时动画按钮的高度和宽度 - mouseleave无法正常工作

2 个答案: