jQuery: Images with fadein and fadeout (fading)

Question

I've got the following code:

var clicked = false;
var klick = false;
$("img#hovertom").click(function() {
    if (clicked) clicked = true;
    else $(this).attr("src", "../img/tom_effects.png");
    if (clicked = true) $(this).attr("src", "../img/tom_effects.png");
    if (clicked = true) $("img#hoverdaniel").attr("src", "../img/daniel.png");
    if (clicked = true) klick = false;
});
$("img#hovertom").hover(function() {
    if (!clicked) $(this).attr("src", "../img/tom_hover.png");
}, function() {
    if (!clicked) $(this).attr("src", "../img/tom.png");
});
$("img#hoverdaniel").click(function() {
    if (klick) klick = true;
    else $(this).attr("src", "../img/daniel_effects.png");
    if (klick = true) $(this).attr("src", "../img/daniel_effects.png");
    if (klick = true) $("img#hovertom").attr("src", "../img/tom.png");
    if (klick = true) clicked = false;
});
$("img#hoverdaniel").hover(function() {
    if (!klick) $(this).attr("src", "../img/daniel_hover.png");
}, function() {
    if (!klick) $(this).attr("src", "../img/daniel.png");
});

There are 2 images with each 3 versions, they change on hover and click. And if you click the other image. It works fine, but the image changes immediately. Can anyone rewrite the code that the images fadein fadeout or fadeto, simply that the images are 'animated' when they change.

Thx

How can your code even work? For condition comparisons, you use the equivalent operator `==` not the `=` which is the assignment. — Eric, Jul 02 '13 at 16:37
Idk, but it works :) It's an jQuery code, maybe in jQuery they use = or something. But can you help me with the fade in? — Tom Te, Jul 02 '13 at 17:26

score 0 · Answer 1 · answered Jul 02 '13 at 16:22

0

mmm, maybe something like:

$(this).fadeOut().attr("src", "the_path").fadeIn();

I've not tested it but give a try

answered Jul 02 '13 at 16:22

Aguardientico

7,641
1
33
33

score 0 · Answer 2 · answered Jul 02 '13 at 16:32

0

As they told you, you can simulate the transition by using fadeIn and fadeOut, although is not a real transition between images as it only hides one and shows other without any real transition between the images but with the background:

$(this).fadeOut('slow', function(){
     $(this).attr('src', 'YOUR_PATH').fadeIn();
});

Living example: http://jsfiddle.net/8hLMB/

answered Jul 02 '13 at 16:32

Alvaro

40,778
30
164
336

Maybe you can write in for my code? I don't get how to do it in this code. I'm a jQuery noob ;) – Tom Te Jul 02 '13 at 17:24

jQuery: Images with fadein and fadeout (fading)

2 Answers2