1

我只是想为我的 HTML 代码中的一些 div 设置动画。我刚参加了一个暑期课程，现在已经结束了，我想继续编码和学习更多，所以我只是在胡闹，但没有完成。

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650'),
            function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
        };
    });
});

据我所知，一切都设置得很好，我选择悬停的原因是因为“鼠标进入/离开”在 chrome 中不起作用（无论出于何种原因）。我浏览了一堆类似的问题，但找不到我一直在寻找的东西。

4

3 回答 3

4

你的支架搞砸了。我认为应该是这样的：

$(document).ready(function() {
    $('div').hover(function() {
        $(this).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).animate({height: '45px',opacity: '1.0'},'650');
    });
});

仅供参考，如果您查看浏览器的错误控制台或调试控制台，它应该会显示类似这样的语法错误。

而且，您可能想要添加.stop(true, true)这样的动画，如果您快速移入和移出鼠标，动画就不会堆积。

$(document).ready(function() {
    $('div').hover(function() {
        $(this).stop(true, true).animate({height: '68px',opacity: '0.3'},'650');
    }, function() {
        $(this).stop(true, true).animate({height: '45px',opacity: '1.0'},'650');
    });
});

工作示例：http: //jsfiddle.net/jfriend00/tZEWy/

于 2013-07-08T16:21:01.800 回答
1

我认为您错过了关闭第一个功能。这里试试这个

$(document).ready(function() {
    $('div').hover(
        function() {
            $(this).animate({height: '68px',opacity: '0.3'},'650');
        },
        function() {
            $(this).animate({height: '45px',opacity: '1.0'},'650');
        }
    );
});
于 2013-07-08T16:21:22.550 回答
0

jQuery 的悬停功能只是两个功能的混合！

它是 和 的混合体.mouseenter，.mouseleave它们在它的参数中。

所以.hover就是这个.hover(.mouseenter, .mouseleave)。

所以你必须这样做：

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

    $(this).animate({height: '68px',opacity: '0.3'},'650');

} /*mouseenter */, function(){

    $(this).animate({height: '45px',opacity: '1.0'},'650');

} /*mouseleave*/);
于 2013-07-08T16:30:34.160 回答