Animating “src” attribute

Question

I have an HTML document. It looks like this:

When the user hovers \"stackinfo\" image, I w

Answer 1

The JQuery color plugin will allow you to animate colors.

https://github.com/jquery/jquery-color

So you could have an png with transparent background and animate the background of the container holding the png. If you can do your text in a websafe font, then you could animate that too...

Or you can make your SVG image, embed the svg xml directly into your html (probably not going to work in older versions of IE since they have terrible SVG support w/o svg plugins)

Using the jquery.color.js we just add a hook to allow the svg fill property and then make a hover function like:

jQuery.Color.hook('fill');

var animationSpeed = 200;

$('#svgwrapper svg').hover(    
    function(){    
        $(this).animate({backgroundColor:'#000000'}, animationSpeed)
        .find('path').animate({fill:'#ffffff'}, animationSpeed);
    },                         
    function(){
         $(this).animate({backgroundColor:'#ffffff'}, animationSpeed)
        .find('path').animate({fill:'#000000'}, animationSpeed);
    }
);

Here is a working fiddle of the SVG method. Works in IE9 and current versions of firefox, opera, chrome and safari

http://jsfiddle.net/webchemist/hBHBn/11/

Answer 2

You can't animate the .src value directly with jQuery.

You will need to use two images, positioned on top of one another so one can be faded in on top of the other.

Both images should be preloaded or precached so there is no delay for an image to load after setting .src.

Working example: http://jsfiddle.net/jfriend00/n52Fr/

$(".container").hover(function() {
    $(this).find(".fadeTop").fadeOut(1000);
}, function() {
    $(this).find(".fadeTop").fadeIn(1000);
});​


<div class="container">
    <img src="http://photos.smugmug.com/photos/344291068_HdnTo-Th.jpg">
    <img class="fadeTop" src="http://photos.smugmug.com/photos/344290962_h6JjS-Th.jpg">
</div>​ 


.container {
    position: relative;
    height: 100px;
    width: 150px;
}

.container img {
    position: absolute;
    top: 0;
    left: 0;
}

Answer 3

function troca_imagem(url) {
    $('#foto_grande').animate({ opacity: 0 }, 500, function () { document.getElementById('foto_grande').src = url; });
    $('#foto_grande').animate({ opacity: 1 }, 500);
}

Answer 4

You can't really animate the src attribute, but

If your goal is to fade from one image to the other, place them above each other and animate the opacity of the top one:

http://jsfiddle.net/RPYGv/1/

HTML:

<div class="wrapper">
  <img src="...">
  <img src="..." class="on-hover">
</div>​

CSS:

.wrapper {
  position: relative;
}
.wrapper img{
  position: absolute;
  top:0; left:0;
}
.on-hover{
  opacity: 0;
}​

JS:

$(".wrapper").hover(function(){
  $(".on-hover", this).animate({opacity:1},"slow");
},function(){
  $(".on-hover", this).animate({opacity:0},"slow");
});

​

Answer 5

Edited my answer based off of the edit the OP made. Below uses a css sprite and animates the opacity using css3. Note this will not work in any IE9<.

Live Demo

More in depth explanation

.sprite{
    width:100px;
    height:100px;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    display:inline-block;
    position:relative;
}
.sprite span{
    position: absolute;
    top: 0; left: 0; bottom: 0; right: 0;
    background:url(http://www.somethinghitme.com/Post%20Images/sprite.png);
    background-position: left -100px;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -moz-transition:    opacity 0.5s;
    -o-transition:      opacity 0.5s;   
}

.sprite:hover span{
 opacity: 1;   
}

​ ​

Answer 6

You could animate the opacity to zero, use the callback to change the image source and bind an event handler for when the image loads that animates the opacity back.

$('.sprite').on("mouseover",function(e){
    $(this).animate({
        opacity: 0
    },1000, function(){
        setTimeout(function(){
            $('.sprite').animate({
                opacity: 1
            },1000);
        },50);
        $('.sprite').css("background","url(someurl)");
    });
})

See this example: http://jsfiddle.net/nHC9U/