1

I've noticed that for both what I'm working on locally and in this fiddle, the GIF animation either won't play or will quickly skip between 2 frames. However, if the GIF is set by in DOM/HTML and nothing changes in the JS, the animation plays fine like in this fiddle.

step: function(img, tween) {

                if (img <= -20) {
                    $(this).attr('src', 'http://en.clipart-fr.com/data/gif/Dogs/animated_gif_dogs_011.gif');
                }

                if (img > -20 ) {

                    //change the falling image picture
                    $(this).attr("src", "http://placehold.it/100/50");
                    ape = 1;
                }
            }

My assumption is that, because the "src" in the JS is being set in the "step" function, the function is constantly resetting it and thus the animation never moves past the first frame. (something like that)

I would like to have a frame animation occur (whilst the falling happens), and when the falling position (of the original, "easeOutBounce" animation) of that animation reaches a certain point, have the "src" change to a single png image. However, if on the bounce back the image bounce back up past a certain point, I would like the frame animation to start playing again. Suggestions on how I can accomplish this?

Thanks for the continuing help, SO community.

EDIT: Okay, nobody has responded yet so I've started experimenting with different methods. Currently I'm trying https://stackoverflow.com/a/9669981/3862501, but the images do not appear. (Is the document.ready function not continually updating?) 

var animPort = ["1.png", "2.png", "3.png", "4.png", "5.png"];

$(document).ready(function() {

    for (var i=0; i<animPort.length; i++) {
        var animatePortfolio = setInterval(function() {
            $("#portfolio").attr('src', 'images/home/animate/'+animPort[i]);
        }, 1300);
    }

});
Community
  • 1
  • 1
Terf
  • 51
  • 8
  • The `ready` function is fired once, when the page has finished loading all of it's resources. – Jamie Dixon Aug 29 '14 at 17:37
  • Animated gifs are a mess. My original thought was to preload the gif so that it's fully available, but that's more [complicated than it's worth](http://stackoverflow.com/questions/5826747/javascript-to-only-display-animated-gif-when-loaded). You may be better off preloading the frames of the animation and showing/hiding them as need be. – stakolee Aug 29 '14 at 17:43
  • "My assumption is that, because the "src" in the JS is being set in the "step" function, the function is constantly resetting it and thus the animation never moves past the first frame." that's a pretty good assumption, but i don't think it would actually cause that behavior in all browsers – Kevin B Aug 29 '14 at 17:49
  • The code in your edit is a mess for several reasons. One being, No, document ready doesn't continually run, and two, your for loop has various scoping and logic issues, ranging from `i` not being what you think it is and you are creating multiple intervals that will all fire at about the same time, all with the same value for `i` – Kevin B Aug 29 '14 at 17:51
  • Okay, well then perhaps I should try to work with http://spritely.net/ then because frankly a lot of this seems like out of my league of understanding right now. @KevinB - If you have time could you be more specific with your suggestions for fixing this? (perhaps in a fiddle?) Alternatively I could just scrap all that if you have a better idea of how I could make an animation run. – Terf Aug 29 '14 at 18:04
  • Can you explain what your goal is? What exactly are you trying to accomplish? I see what you've tried and what it ended up doing, but that doesn't really help explain the goal. For example, why are you using the step callback to do this? – Kevin B Aug 29 '14 at 18:05
  • 1
    Like this? http://jsfiddle.net/atk91pwg/6/ – Kevin B Aug 29 '14 at 18:08
  • Yes, that accomplishes what I wanted to do - the gifs only run if the img is above a certain position, otherwise a single img is shown. (I'm using the step callback because that is what another SO user recommended/helped me figure out how to use for this situation.) I'm trying to fully understand the logic, though: The gif animation runs initially through the HTML; the over var is set to "true" so that the first "if" in the step function doesn't run, but the second "if" does run and changes the "true" to "false", allowing the first "if" to run if the "bounceback" requirements are met? – Terf Aug 29 '14 at 18:45

0 Answers0