CODEWITHSUNDEEP
jqueryhoverjquery-animatemouseoverattr
gilesadamthomas
gilesadamthomas

Reputation: 181

animate image attribute change

 $(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?

Upvotes: 1

Views: 11656

Answers (2)

Bram Vanroy
Bram Vanroy

Reputation: 28457

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

Upvotes: 5

Herbert
Herbert

Reputation: 5645

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

Upvotes: 0

Related Questions