animate image attribute change

Question

 $(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).attr("src", src);
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");
            $(this).attr("src", src);
        });
    });

I have a carousel that appears on most pages of a wordpress theme, I need to change any image in any carousel to a new attr when mouseover which is the old src + -bw or any suffix. But this needs to tween or animate. The above code changes the image but doesnt animate. Also many people suggest pre loading the image that are to be revealed on hover?

Answer 1

What kind of animation do you need? Fading?

$(function() {
    $(".flexslider img")
        .mouseover(function() { 
            var src = $(this).attr("src").match(/[^\.]+/) + "-bw.png";
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        })
        .mouseout(function() {
            var src = $(this).attr("src").replace("-bw.png", ".png");                
            $(this).fadeOut("fast").attr("src", src).fadeIn("fast");
        });
    });

Answer 2

You would need to do a cross fade, here it is explained:

http://jqueryfordesigners.com/image-cross-fade-transition/

You could do something like this:

crossFade = function(element, to_src) {
   element = $(element); //maybe this isn't even needed.
   element.style = "display: block; position: absolute; top:0; left:0;"; //please replace this with four .css() calls ;) and double check the positioning
   parentElement = $(element.parentNode);
   newElement = $("<img/>", {
      src: to_src,
      style: "display: none; position: absolute; top:0; left:0;"
   }
   newElement.appendTo(parentElement);
   //please check in your dom if both images are in the carrousels-list-node, as I might have errored ;)
   newElement.fadeIn(5000, (function(el) {  return function() { el.remove(); }; })(element));
};