Search code examples
jqueryanimationsrcfadeto

Javascript/Jquery animations

I am a little bit confused about how javascript and the jquery lib works. example. on a click event i want to have my image fade change sources and then fade back in. I figured in my head this should work. you execute one code and then you execute the next. but it tends to switch and then execute the code. can some one help me understand why this happens and if there is any solutions.

$('.under_box').click(function(){
var main_source=$(this).attr("src");
$("#main_image").fadeTo(300,0);
$("#main_image").attr("src",main_source).queue();
$("#main_image").fadeTo(500,1);
Solution

  • These functions tend to be asynchronous, in the sense that they will not wait to be completed before the next line of code starts. You can try using the callback function like this:

       $("#main_image").fadeTo(300,0, function(){
        $("#main_image").attr("src",main_source).queue();
        $("#main_image").fadeTo(500,1);
    });

    The idea is that the callback function executes when the fadeTo is completed.