How Do I, On Hover, Fade From One Image To Another

Question

Basically, the below jQuery code code allows me to swap one image to another on hover, but I want it to fade from the first image to the other and I don't have the knowledge to make that work (I have searched for some answers and I have also tried to do it myself).

The thing with this question is that there seems to be a lot of people asking it, but on the few that I've found that may have slightly helpful answers (in terms of what I'm trying to do at least), they still aren't what I'm looking for.

I have a working script from here (http://www.selfcontained.us/2008/03/08/simple-jquery-image-rollover-script/), I just want the fadein effect, I've tried to mess around with it myself but jQuery is still a weak spot of mine, lol

    <script type="text/javascript">
    $(function() {
    $('img[data-hover]').hover(function() {
    $(this)
    .attr('tmp', $(this).attr('src'))
    .attr('src', $(this).attr('data-hover'))
    .attr('data-hover', $(this).attr('tmp'))
    .removeAttr('tmp');
    }).each(function() {
    $('<img />').attr('src', $(this).attr('data-hover'));
    });;
    });
    </script>

    <img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

Here (http://jqueryfordesigners.com/image-cross-fade-transition/) and here (http://jqueryfordesigners.com/image-fade-revisited/) are great examples of what I'm looking to do, but it's a lot more code than I would think is needed.

Any and all ideas are welcomed! Also, if anyone has any easier routes to take, I wouldn't mind that either haha. Thanks!

Not related to fading, but I think a local variable would be easier to work with than a 'tmp' attribute on the element. — nnnnnn, Jan 15 '13 at 06:28
`fadein` what to fadein with your code can you plz be more specific? — Jai, Jan 15 '13 at 06:29
The idea is to fade from one image to another, right now it just swaps the images, maybe fade isn't the right word to use in this case but that's the only way I would think to describe what I'm trying to visualize haha... Do you know how I could improve on this? — mattroberts33, Jan 15 '13 at 06:31

score 0 · Answer 1 · edited May 23 '17 at 12:18

0

Possibly a similar question here:

jQuery Change Image src with Fade Effect

Basically on hover you start fading out

$('img[data-hover]').hover(function() {
var $image=$(this);
$(this)
.attr('tmp', $(this).attr('src'))
.attr('src', $(this).attr('data-hover'))
.attr('data-hover', $(this).attr('tmp'))
.removeAttr('tmp');

$image.fadeOut(400, function() {
        $image.attr('src',$image.attr('data-hover'));
    }).fadeIn(400);

});

with a callback event, and chain it with fadeIn. In the callback event you change the image source.

The source code I pasted is explanatory only, might not work exactly as you expect, but you'll get the idea.

Here's a working example: http://jsfiddle.net/GxBWt/

edited May 23 '17 at 12:18

Community

1
1

answered Jan 15 '13 at 06:29

povilasp

2,386
1
22
36

I feel like the idea is getting there, but the code didn't change the image at all, so I'm not sure if I'm missing something... I do get the idea though, I read that you need to fadeOut before you can fadeIn (Y) – mattroberts33 Jan 15 '13 at 06:41
This is the weird thing, that code works in jsfiddle but not in Adobe Dreamweaver... The code I used above in my question works fine in Dreamweaver though... Also with the code you provided, I don't really want it to fadeOut first, I just want it to fade from one image to the other, thanks though we're getting closer haha – mattroberts33 Jan 15 '13 at 06:54

score 0 · Answer 2 · answered Jan 15 '13 at 06:48

0

Here is a jQuery Code

$("img").mouseenter(
  function () {
     $("img").attr("src","http://rhceblog.com/wp-content/uploads/2012/11/Yahoo_3.jpg");
  }
);
$("img").mouseleave(
  function () {
     $("img").attr("src","https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTt__9kJSk-ESPLpb_zfQ7SQm7Z_w_m32fyiD07hnTAU7zvFWx_dQ");
  }
);

DEMO : http://jsfiddle.net/ipsjolly/R6FnC/

answered Jan 15 '13 at 06:48

Code Spy

9,626
4
66
46

At the moment both of our scrips pretty much do the same thing. – mattroberts33 Jan 15 '13 at 06:51

score 0 · Answer 3 · answered Jan 15 '13 at 07:57

If you really wanna that effect, you can using canvas.

We have two image A and B.

Using maxDimension(a, b) as canvas' dimension.
set globalComposite as lighter
set globalAlpha = 0.1 (0.1 is a step value you can change it but range is [0, 1]
draw image a
set globalAlpha = 1 - step
draw image b
repeat 3 to 6

var i = 0.1;// global alpha
var runID; // interval id

function fadeImage() { if (i > 1) { clearInterval(runID); return;
} ctx.globalAlpha = i;
ctx.drawImage(imageA, width, height);
ctx.globalAlpha = 1 - i;
ctx.drawImage(imageB, width, height);
i += 0.1;
}

function run() { ctx.save(); ctx.globalComposite = "lighter"; runID = setInterval(fadeImage, 500);
ctx.restore(); }

example: http://jsfiddle.net/xFryE/1/

In example, I just specified canvas' dimension and not adjust width of two image, using same width of images should be better.

That's sort of what I'm looking for, not quite there though. — mattroberts33, Jan 15 '13 at 08:15

score 0 · Answer 4 · answered Jun 14 '13 at 22:29

you can do somthin like this:

there is html code:

<div class="img" style="position:relative; z-index:1;">
  <div class="hover" style="position:absolute; z-index:3; top:0; left:0; display:none;"><img src="image-hover.png" /></div>
  <div style="position:absolute; z-index:2; top:0; left:0"><img src="image.png"></div>
</div>

there jquery:

$('.img').hover(
   function(){
     $(this).find('.hover').fadeIn();
},
   function(){
     $(this).find('.hover').fadeOut();
}
);

if you want from image :

<img src="../logo/Untitled-31.fw.png" data-hover="../logo/Untitled-31.png" />

you can replace this to html code like i write above, using jquery $('img').each();

How Do I, On Hover, Fade From One Image To Another

4 Answers4