jQuery not taking effect immediately.

Question

Is there any reason for my jQuery effects not to be taking effect immediately? I have jQuery hover fade effects, but then I also have CSS rollovers as backups for anyone who has javascript disabled. What happens is when you load a page and roll over a link, you get the CSS effect, but any time after that, you get the nice, smooth jQuery effect. This must be repeated for every link. Is there a fix for this?

My jQuery code is this:

$(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);
});

});

I'm getting my jQuery straight from Google (http://code.jquery.com/jquery-latest.pack.js)

I'm using Safari. Right now, I'm testing my site with MAMP, so its local on my computer, but eventually it will go to an external server.

Answer 1

This may not be the best solution, but try negating the CSS with JavaScript right before you set the effect. You can add a class like anotherClass:hover with the CSS for the hover effect and then remove the class with JavaScript.

Answer 2

Try using the jQuery file locally. Even Google can't compete with things being served from your own computer, and it's not impossible that the delay you see here won't be reflected once it's online.

Answer 3

Since your CSS has an immediate hover effect, it just precedes jQuery and changes the styles before your hover event has a chance to kick in. I would disable these styles, or change the style on the elements when jQuery loads so the CSS :hover selectors are no longer in effect.

In your HTML you could have for example:

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

In your CSS:

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

In your jQuery:

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

Also, I'd suggest a function here to simplify looking at that code:

$(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);
  });
}