I have a problem with jquery callback. The callback is executed before the fadeIn animation is completed. What im trying to do is, I want to replace an existing image with a new image and resize the new image to a specific size.

var filepath = "images/test.jpg";
$('#imagewrap').css('background-image', 'url("images/loader.gif")');//display a loading gif
$('#uimage').hide();//hide the current image
var i = $('<img />').attr('src', filepath).load(function()//load the new image 
    $('#uimage').attr('src', i.attr('src'));//change the src to new image
    $('#imagewrap').css('background-image', 'none');//hide the loading gif
    $('#uimage').fadeIn('slow', resize());//fade in the new image

function resize()
alert($('#uimage').width());//it shows the width of the previous image

Edited by ShinyEdge: n/a

6 Years
Discussion Span
Last Post by ShinyEdge

Have you tried this:

$('#uimage').fadeIn('slow', function(){ resize(); });

Are you sure there is no CSS for that id specifying a fixed width?

Edited by pritaeas: n/a


your code fixed it. thanks. whats wrong in calling the function directly?


You would want the following:

$('#uimage').fadeIn('slow', resize);

Adding the () at the end executes the function. So instead of fadeIn executing the function when it is done doing it's thing, you have it executing and returning undefined as the function to get executed (as resize returns undefined).

Votes + Comments
Good point. Missed that.
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.