Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts

    javascript animation error

    im getting a very strange error.
    Code:
    var img=1;
    var source1;
    var source2;
    var called=0;
    var x=1;
    
    var img=1;
    var imgUrl;
    var imgCount =5;
    
    
    $(window).load(function(){
    document.getElementById("imgm").src="Images/test1.jpg"; // setup first image on pageload
    	setup();
    
    });
    
    function setup() {
    if(img>imgCount){ // if img is greater than the value of imgCount set to 1
    img=1;
    }else{
    img++;//add 1 to the current numeric value
    }
    imgUrl="Images/test"+img+".jpg";//set imgUrl based on current img numeric value
    anim();
    
    }
    
    
    function anim(){
    $("#imgm").fadeOut(3000,function(){});
    //fade out element with an id of "imgm"
    document.getElementById("imgm").src=imgUrl;
    $("#imgm").fadeIn(3000,function(){});
    //alert here
    //once fadeout has completed, change src attribute of "imgm" to value of imgUrl, then fade in
    setup();
    }
    if i run this now it will fade the same image in and out forever, however if i add an alert at the "//alert here" comment it pops up alerts constantly and if you hit ok it changes image without animation. i have no idea what's wrong. anyone have any ideas? thanks in advance

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    Try to understand that the comment line in your code
    Code:
    //once fadeout has completed, change src attribute of "imgm" to value of imgUrl, then fade in
    is wrong, from the point of view of the asynchronous program flow. The order will be

    1 - Start the fadeOut (running asynchronously)
    2 - Set the src of imgm to the new imgURl (fadeOut is still being processed). The loading process of the image will start (running asynchronously)
    3 - Start the fadeIn (running asynchronously). The fadeOut is still being processed, so fadeIn will only run after fadeOut finished (implicit queue). The loading process of the image might still be in progress
    4 - Run setup again, which will run anim again (very very fast ... so all of the fadeOut and fadeIn will be queued very very fast but will run one after the other in intervals of 3 seconds)

  • #3
    New to the CF scene
    Join Date
    Dec 2012
    Posts
    6
    Thanks
    2
    Thanked 0 Times in 0 Posts
    oh ok i see what you mean, so would
    Code:
    setTimeout(anim(),6000);
    fix that if i put it in setup? it should delay each run long enough for the animations to run. but that doesnt explain the problem of the image not changing when the animation usually plays though it does explain the behaviour when i add in the alert im not sure why the alert is causing this to happen when it doesnt happen normally.

  • #4
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,391
    Thanks
    12
    Thanked 568 Times in 561 Posts
    You should use the callback functionality provided for the animations. The callbacks will only be called after the animation finished. You should also combine this with an onload event handler for your images, so that you only fadeIn the new image after it has been loaded

    Code:
    function anim() {
       //fade out element with an id of "imgm"
       $("#imgm").fadeOut(3000,function(){
          // fade out has finished, load new image and fade it in
          var newImage = new Image();
          newImage.onload = function() {
             // after the new image has been loaded, update the src and fade in
             $("#imgm").attr("src", this.src);
             $("#imgm").fadeIn(3000,function(){
                // after fadeIn is complete, call setup() again
                setup();
             });
          };
          newImage.src = imgUrl;
       });
    }

  • Users who have thanked devnull69 for this post:

    barrerr122 (12-11-2012)


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •