Change the image on hover

When you are changing the src of an image, there isn’t an animation option, the previous image will just disappear, and the new one will load into the image position. So what you should rather do is to hide the image first, then change the src of the image, and when that image done loading, show the new image. This code would do that:

var image = jQuery(this);
var newsrc = '';
if(image.find('img').attr('src') != newsrc) {
	image.animate({"opacity":"0"},500, function(){
		image.find('img').attr('src', newsrc);
		image.find('img').load(function() {

Put this on Event on mouseenter for your image item, and it will change to the given image. You could put the exact same code to the Event on mouseleave option too with the original image url, to change it back, if you want to, but the Fade item does the same, so you could use that instead of a custom code.