Search jQuery

jQuery Forum

JQuery Switch Img Src with fade effect

in Using jQuery • 13 years ago

Basically I have a stretched resizable background image, I want to switch it's src by clicking on a small icon or text link. I would like this transition to fade also. So when the link is clicked on, the image src fades into the new one. Any suggestions?

Replies(6)

Guest

Re: JQuery Switch Img Src with fade effect

13 years ago

I've always done this by cloning the item you want to fadeout, placing it directly behind the current one, changing the src attribute, then fading out the top one.

Here's some example code that I've used before,

You might need to tweak this because i've extracted it from a much more

complex block of code, but the principle should work. What you're doing is cloning your image element, positioning it behind

with a z-index lower than the original, then fading out the original

revealing the new image. Hope it helps Ross

$("#clone_el").css("z-index",2);
ele = $("#clone_el").clone().css({position:"relative","top":"-"+$("#clone_el").eq(0).height()+"px","z-index":"1"}).attr("src","/path/to/new/src");
$("#clone_el").after(ele).fadeOut();

harmjanro..

Reageren: JQuery Switch Img Src with fade effect

13 years ago

I have the same problem. I have 3 thumbs, and when I click on one of the thumb, the background of my site has to fade to the same image as the thumb. This code is working for me, but it is fading to white first, and after it fades to the new background.

function changeback(backname){
      var newsrc = "<?=SITE_WEBDIR?>img/bg/"+backname;
    $('#backimg').fadeOut(300, function(){
          $(this).attr('src',newsrc).bind('onreadystatechange load', function(){
                  if (this.complete) $(this).fadeIn(300);
            });
       });
}

I want to let the background fade to the new background directy, and not a white background first.

Any ideas?