jQuery悬停功能 - 我错过了啥？

Posted 2023-05-08

【中文标题】jQuery悬停功能 - 我错过了啥？

【英文标题】：jQuery hover function - what am I missing?jQuery悬停功能 - 我错过了什么？

【发布时间】：2013-07-06 01:35:12

【问题描述】：

我只是想为我的 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 中不起作用（无论出于何种原因）。我浏览了一堆类似的问题，但找不到我一直在寻找的东西。

【问题讨论】：

你能在 jsFiddle.net 上设置一个例子吗？

jsfiddle.net/b8up9

【参考方案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/

【讨论】：

是的，它应该可以工作......而且......给你的 div (id='abc') 提供 id 并使用 $('#abc') 而不是 $( 'div')

是的，您的代码可以工作，但是当我从 notepad++ 保存并运行时，它仍然没有动画。

@JAPytlak - 然后，显然您将其放入另一个页面的方式有问题。代码是正确的并且在这个 jsFiddle 中运行。你在这个其他页面中加载了 jQuery 吗？你能提供一个链接到这个其他页面吗？如果不向我们显示您正在运行它的实际页面，我们所能做的就是猜测可能出了什么问题。

@JAPytlak：这听起来可能是一个不同的问题，可能更多关于notepad++而不是javascript（我不使用它，所以不知道你的问题可能是什么）。

moxie.cs.oswego.edu/~jpytlak/projects 是网站，也许我错过了一些超级简单的东西？

【参考方案2】：

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

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

【讨论】：

第二个函数的右大括号后面还有一个额外的分号。

【参考方案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*/);