jQuery没有立即生效答案

【问题标题】：jQuery not taking effect immediatelyjQuery没有立即生效
【发布时间】：2011-01-25 04:58:34
【问题描述】：

我的 jQuery 效果没有立即生效有什么原因吗？我有 jQuery 悬停淡入淡出效果，但我也有 CSS 翻转作为任何禁用 javascript 的人的备份。发生的情况是，当您加载页面并滚动链接时，您会获得 CSS 效果，但之后的任何时候，您都会获得漂亮、流畅的 jQuery 效果。这必须对每个链接重复。有解决办法吗？

我的 jQuery 代码是这样的：

$(document).ready(function() {

$(".nav-link").hover(function() {
 $(this).animate({ color: "#669900" }, 250);
 return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".twit-link").hover(function() {
  $(this).animate({ color: "#0099CC" }, 250);
  return false;
}, 
function() {
 $(this).animate({ color: "#999999" }, 250);
});

$(".rss-link").hover(function() {
 $(this).animate({ color: "#CC6600" }, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999" }, 250);
});

$(".sidebar-item").hover(function() {
  $(this).animate({ color: "#669900"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#333333"}, 250);
});

$(".archive-link").hover(function() {
  $(this).animate({ color: "#666666"}, 250);
  return false;
}, 
function() {
  $(this).animate({ color: "#999999"}, 250);
});

$(".sub").hover(function() {
  $(this).animate({ 'background-color': '#336600'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'background-color': '#669900'}, 250);
});

$(".post-sb").hover(function() {
  $(this).animate({ 'opacity': 1.0,
   'filter': 'alpha(opacity = 100)'}, 250);
  return false;
}, 
function() {
  $(this).animate({ 'opacity': .25,
   'filter': 'alpha(opacity = 25)'}, 250);
});

});

我的 jQuery 直接来自 Google (http://code.jquery.com/jquery-latest.pack.js)

我正在使用 Safari。现在，我正在使用 MAMP 测试我的网站，因此它在我的计算机上是本地的，但最终它将转到外部服务器。

【问题讨论】：

你能发布你的jQuery代码吗？这会很有帮助。
您能说出您使用的是哪个浏览器，以及您从哪里提供 jQuery 吗？在某些浏览器中，您可以看到下载与 HTML 文件关联的资源需要多长时间。（在 Chrome 中为 Ctrl+Shift+J。）
这是直播/在外部服务器上还是在您自己的计算机上？
请在奇数行前添加 4 个空格，以使整个代码更易读，请参阅stackoverflow.com/editing-help
动画是在 jQueryUI 中提供的，而不是在 jQuery 中。您从哪里提供 jQueryUI 库？

标签： jquery css hover effects fade

【解决方案1】：

由于您的 CSS 具有立即悬停效果，它只是在 jQuery 之前并在您的悬停事件有机会启动之前更改样式。我会禁用这些样式，或者在 jQuery 加载时更改元素的样式，以便 CSS :hover 选择器不再有效。

在您的 HTML 中，例如：

<a class="nav-link njs">My Link</a>

在您的 CSS 中：

.nav-link { color: #999999 }
.njs.nav-link:hover { color: #669900; }

在你的 jQuery 中：

$(".njs").removeClass("njs"); //Disable the hovers

另外，我建议在这里使用一个函数来简化查看该代码的过程：

$(function() {
  $(".njs").removeClass("njs");
  setColors(".nav-link", "#669900", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");
  setColors(".rss-link", "#CC6600", "#999999");
  setColors(".sidebar-item", "#669900", "#333333");
  setColors(".archive-link", "#666666", "#999999");
  setColors(".twit-link", "#0099CC", "#999999");

  $(".sub").hover(function() {
    $(this).animate({ 'background-color': '#336600'}, 250);
  }, function() {
    $(this).animate({ 'background-color': '#669900'}, 250);
  });

  $(".post-sb").hover(function() {
    $(this).fadeIn(250);
  }, function() {
    $(this).fadeTo(250, 0.25);
  });

});

function setColors(selector, hColor, nColor) {
 $(selector).hover(function() {
    $(this).animate({ color: hColor}, 250);
  }, function() {
    $(this).animate({ color: nColor}, 250);
  });
}

【讨论】：

【解决方案2】：

这可能不是最好的解决方案，但在设置效果之前尝试使用 JavaScript 否定 CSS。您可以使用 CSS 为悬停效果添加类似 anotherClass:hover 的类，然后使用 JavaScript 删除该类。

【讨论】：

【解决方案3】：

尝试在本地使用 jQuery 文件。即使是 Google 也无法与您自己的计算机提供的服务竞争，而且您在此处看到的延迟一旦上线就不会体现出来，这并非不可能。

【讨论】：