Trigger effect with multiple hover instances

[tobexe]

OK, I don’t know if the title makes much sense but here’s the code I’m working with.

 // Fade in images so there isn't a color "pop" document load and then on window load

$("#image img").fadeIn(500);



// clone image

$('#image img').each(function(){

var el = $(this);

el.css({"position":"absolute"}).wrap("
").clone().addClass('img_grayscale').css({"position":"absolute","z-index":"998","opacity":"0"}).insertBefore(el).queue(function(){

var el = $(this);

el.parent().css({"width":this.width,"height":this.height});

el.dequeue();

});

this.src = grayscale(this.src);

});



// Fade image

$('#image img').mouseover(function(){

$(this).parent().find('img:first').stop().animate({opacity:1}, 250);

})



$('.img_grayscale').mouseout(function(){

$(this).stop().animate({opacity:0}, 250);

});



});



// Grayscale w canvas method

function grayscale(src){

var canvas = document.createElement('canvas');

var ctx = canvas.getContext('2d');

var imgObj = new Image();

imgObj.src = src;

canvas.width = imgObj.width;

canvas.height = imgObj.height;

ctx.drawImage(imgObj, 0, 0);

var imgPixels = ctx.getImageData(0, 0, canvas.width, canvas.height);

for(var y = 0; y < imgPixels.height; y++){

for(var x = 0; x < imgPixels.width; x++){

var i = (y * 4) * imgPixels.width + x * 4;

var avg = (imgPixels.data + imgPixels.data + imgPixels.data) / 3;

imgPixels.data = avg;

imgPixels.data = avg;

imgPixels.data = avg;

}

}

ctx.putImageData(imgPixels, 0, 0, 0, 0, imgPixels.width, imgPixels.height);

return canvas.toDataURL();

}

As you can see, the fade in is triggered by a hover on the image id, and the fade out is triggered by a generated .img_greyscale class.

On my site, I’ve got a div that sits over the image and I’d like to trigger the effect when hovering over the div as well. It’s id is “description”.

I’m completely new to javascript and jquery so any assistance would be much appreciated!

[Author]

Posts