Question

我的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);
});

});

我直接从Google（http://code.jquery.com/jquery-latest.pack.js）

获取jQuery

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

Answer 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);
  });
}

Answer 2

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

Answer 3

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

jQuery没有立即生效

3 个答案: