image fade on click

Question

HTML :

<img class=change src="http://{{$image_server}}/web/product/medium/{{$prod_info.image_medium}}" style='width:380px;' />

JQUERY :

var images = [ "01.jpg", "02.jpg", "03.jpg" ];

$(function() {
    index = 0;
    $('.change').click(function(e) {
    var image = images[index++];
    if(index == images.length) 
       index = 0;
        $('.change').parent().fadeOut(200, function() {
            $('.change').attr('src', ''+image); 
              $(this).fadeIn(200);
        });
    });
});

I used this code for image fade in/out on click. But, new image didn't fade in on my system. An old image faded out/in and suddenly appear a new image! I wanna know how to fade in new image smoothly.

score 0 · Answer 1 · answered Jan 10 '13 at 05:10

0

Try like this

Increase your fadeIn time to get exactly what you want

$(function() {
index = 0;
$('.change').click(function(e) {
var image = images[index];
index++;
if(index == images.length) 
   index = 0;
    $('.change').parent().fadeOut(200, function() {
        $('.change').attr('src', image); 
          $(this).fadeIn(800);
    });
});
});

See Demo

answered Jan 10 '13 at 05:10

Dineshkani

2,899
7
31
43

I can't see difference. :'( – wcodavid Jan 10 '13 at 05:24
change the fadeOut and fadeIn timing for your dependency – Dineshkani Jan 10 '13 at 06:11

score 0 · Answer 2 · answered Jan 10 '13 at 05:10

0

Use .on(),

$(document).on('click', '.change', function () { 
});

answered Jan 10 '13 at 05:10

Swarne27

5,521
7
26
41

instead of $('.change').click(function(e) { this line put $(document).on('click', '.change', function () { – Swarne27 Jan 10 '13 at 05:32
$(function() { index = 0; $(document).on('click', '.change', function () { var image = images[index++]; if(index == images.length) index = 0; $('.change').parent().fadeOut(200, function() { $('.change').attr('src', ''+image); $(this).fadeIn(200); }); }); }); – wcodavid Jan 10 '13 at 05:39

image fade on click

2 Answers2