so I'm trying to get a simple jquery image rollover effect to work but it's only working on one of the photos atm

as you will see on here:

http://megamegamegamega.tumblr.com/

when you mouseover the first image you get the effect but it works on none of the other images.

 

this is the code I'm using (im fairly new to jquery so please don't judge)

$("#pix").mouseover(function() {
 $("#date").fadeIn("900", "linear");
});
$("#pix").mouseout(function() {
 $("#date").fadeOut("900", "linear");
});
$("#pix").mouseover(function() {
 $(this).animate({
   opacity: 0.9,
 }, 500, function() {
   // Animation complete.
 });
});
$("#pix").mouseout(function() {
 $(this).animate({
   opacity: 1,
 }, 500, function() {
   // Animation complete.
 });
});

 

thanks

Firstly, you are using id="date" & id="pix" multiple times in your html. They should be class= instead.

 

And in your jquery, you don't specify which 'date' to fade. You need to use something like $(this).siblings().fadeIn

Edited June 12, 201115 yr by Blofeld