Question

我只是想在我的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');
        };
    });
});

据我所知，一切都设置得很好，我之所以悬停的原因是因为'mouseenter / leave'在chrome中不起作用（无论出于何种原因）。我查看了一堆类似的问题，但找不到我一直在寻找的东西。

Answer 1

你的支撑是混乱的。我认为应该是这样的：

$(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/

Answer 2

我想你错过了关闭第一个功能。在这里试试这个

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

Answer 3

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*/);

jQuery悬停功能 - 我错过了什么？

3 个答案: