CODEWITHSUNDEEP
jqueryhtmlcsshover
Victor
Victor

Reputation: 14593

Animating "src" attribute

I have an HTML document. It looks like this:

original

When the user hovers "stackinfo" image, I want it look like this:

hovered

My code for image:

<img src="/Resources/Images/MainMenu/logo.png" name="Logo" width="100" height="30" class="MainMenu" id="Logo" />

I know how to change the src of the image on hover, but how can I animate this?

(I want to do it with jQuery)

What I have already tried:

$(document).ready(function(){
       $('img[name="Logo"]').hover(function(event){
         $(this).fadeIn(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logoHover.png");
         });
       },
       function(event){
         $(this).fadeToggle(function(event){
             $(this).attr("src","/Resources/Images/MainMenu/logo.png");
         });  
       });
});

Upvotes: 4

Views: 21169

Answers (7)

Ricardo Gaefke
Ricardo Gaefke

Reputation: 955

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

Upvotes: 4

WebChemist
WebChemist

Reputation: 4411

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/

Upvotes: 0

user1726343
user1726343

Reputation:

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/

Upvotes: 1

Victor
Victor

Reputation: 14593

Thank you for all your replies, but I found a method that works great!

This is the CSS code:

#Logo.MainMenu{
    margin-left: 0px;
    margin-right: 6px;
    margin-top: 0px;
    margin-bottom: 0px;
    width: 100px;
    height: 30px;
    background: url(/Resources/Images/MainMenu/logo.png);
    -webkit-transition: all 200ms ease;
    -moz-transition: all 200ms ease;
    -ms-transition: all 200ms ease;
    -o-transition: all 200ms ease;
    transition: all 200ms ease;
}

#Logo.MainMenu:hover { 
    background-image: url(/Resources/Images/MainMenu/logoHover.png); 
}

and on the HTML page:

<div id="Logo" class="MainMenu"> &nbsp; </div>

Upvotes: 0

jfriend00
jfriend00

Reputation: 707436

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

Upvotes: 4

Loktar
Loktar

Reputation: 35309

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

​ ​

Upvotes: 1

John Dvorak
John Dvorak

Reputation: 27287

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

​

Upvotes: 1

Related Questions