CODEWITHSUNDEEP
javascriptjqueryjson
sat
sat

Reputation: 1009

jquery how to fade out and fade in images when changing attr src with json

I am stuck as to how fade in and out images when changing the attr src using jquery and json. I have got the image changing correctly but would like to add the fading transition.

Any help and suggestions would be very appreciated.

Below is my code

function(){
                $j(".screenshots ul li#screen1").show();

                $j(".items div a").click(function (event) {
                    var id = $j(this).attr("href");
                    //$j(".screenshots ul li img").fadeOut();

                    $j.ajax({
                        url: "/?func=square_images/get_json&IMAGE_ID="+id,
                        dataType: "json",
                        success: function(data) {
                            $j("#screen1 img").attr("src", data.medium_medium_src);
                        }
                    });

                    event.preventDefault();
                });

            }

Upvotes: 0

Views: 683

Answers (1)

thecodeparadox
thecodeparadox

Reputation: 87073

You can try this within you success function

success: function(data) {
    $j("#screen1 img").fadeOut(100, function() {
       $(this).attr('src', data.medium_medium_src).load(function() {
          $(this).fadeIn();
       });
    })
}

Upvotes: 2

Related Questions