在更改图像src时提供fadeIn fadeOut效果

Question

I was working with responsive web design and I wanted to slide some images in a page. I tried some plugins but the problem with plugin is it uses width and height property and some also assign position absolute. So I thought of changing the src of image myself using js and it worked fine, but can I give some transition effect to it?

What I have done is:

var i =0;
var total =2;
window.setInterval(function(){
  show_hide();
}, 1000);

function show_hide()
{
        var img=$('.image-holder img, .image-holder2 img');
        //alert(img.length);
        if(i%2==0)
        {

             img[0].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';
             img[1].src='http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png';

            i=0;
        }
        else
        {

             img[0].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
             img[1].src='http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834';
        }

       i++;




}

my html

<div  class="image-holder" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />


</div>
<div  class="image-holder2" >
<img src="http://healthystartups.com/storage/600px-MA_Route_1.png?__SQUARESPACE_CACHEVERSION=1319542839834"  />
</div>

Answer 1

Answering the title, giving a fadeIn/fadeOut while changing the src is easy, just let the element fadeOut, change the src and let it fade in again. Also, I would like to point out that with jQuery, iterating through a class like that, ruins the purpose of using it's own selector " .each() "

$('.image-holder img, .image-holder2 img').each(function() {
            $(this).fadeOut(200,function() {
                $(this).attr('src', 'http://digimind.com/blog/wp-content/uploads/2012/02/number2c.png');
                $(this).fadeIn(200);
            });
        });

http://jsfiddle.net/tq9nV/1/

Answer 2

Use jQuery with animate() . You can also run show(N ms) on one of the images and hide(N ms) on the other. You can also choose how to show/hide the images using effects (like fadein and fadeout).

Also, have a look at http://api.jquery.com/fadeIn/ and http://api.jquery.com/fadeOut/