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

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