jQuery UI ToggleClass CSS 悬停答案

【问题标题】：jQuery UI ToggleClass CSS hoverjQuery UI ToggleClass CSS 悬停
【发布时间】：2011-11-15 12:18:46
【问题描述】：

我有一个网站http://www.presentbladet.se（未完成）。当我将鼠标悬停在“测试产品”上时，会出现一个放大镜。到目前为止，一切顺利。

淡入 - 但在 CSS 中保持悬停

我希望过渡平滑并具有淡入效果。我仍然希望尽可能多地保留在 CSS 中，并在 jQuery / jQuery UI 中制作延迟/淡入淡出。

我在我的网站上使用此代码：

$("li.item a").hover(function() {
    $(this).toggleClass("hover", 10000);
        return false;
    });

延迟部分不起作用

它几乎可以工作。它切换类“悬停”，但延迟部分根本不起作用。过渡是即时的，而不是缓慢的淡入淡出。

【问题讨论】：

标签： jquery css jquery-ui hover toggleclass

【解决方案1】：

您必须为 toggleClass 动画添加 jQuery UI 的 toggleClass part。现在您的页面只有核心、小部件和选项卡。转到download page 并选择Effects Core

【讨论】：

【解决方案2】：

jQueryUI 扩展了核心的 jQuery.animate 函数，允许您为元素指定一个类来制作动画。

来自文档：“......它被类转换功能大量使用......”

您可能想尝试一下。像这样。

$("li.item a").hover(function() {
    $(this).animate("hover", 10000);
    return false;
});

【讨论】：

【解决方案3】：

这有帮助吗？

jQuery("#divId").fadeIn(500);

我认为，您可能只需将 .fadeIn(500) 添加到调用 mouseOver 上的图像的函数中。调整数字来调整速度或只使用快或慢的词。

【讨论】：

【解决方案4】：

/* i Don't know exactly whether this is your requirement , if no please post a more specific code , try this code first */
    $("li.item a").hover(
    function() {$(this).addClass("hover");},
    function() {$(this).removeClass("hover");}
    );

【讨论】：