Transform gif into an animated button with jquery

Question

What I would like to achieve is to create an animated button (something like a gif image) I did the animations, but I cannot animate them constinuously. Tried with setInterval, it works for a while but then the animations overlap each other. It needs to work in IE9

Here is my code http://jsfiddle.net/9q5hqas8/

HTML

<a href="#" class="animated-btn">
        <span class="icon"></span>
        <span class="text1">Play Now</span>
        <span class="text2" style="display:none;">Download for free</span>
        <span class="radial"></span>
        <span class="moving"></span>
</a>

CSS

.animated-btn {
    display: block;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#dc0f0f), to(#920f0f));
    background-image: -webkit-linear-gradient(top, #dc0f0f, #920f0f);
    background-image: -moz-linear-gradient(top, #dc0f0f, #920f0f);
    background-image: -ms-linear-gradient(top, #dc0f0f, #920f0f);
    background-image: -o-linear-gradient(top, #dc0f0f, #920f0f);
    background-image: linear-gradient(top, #dc0f0f, #920f0f);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -o-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    margin: 100px auto;
    width: 284px;
    font-family: Arial, sans-serif;
    height: 66px;
    overflow: hidden;
    position: relative;
    text-decoration: none;
}
.animated-btn span {
  display: inline-block;
  text-transform: uppercase;
  vertical-align: top;
  color: #fff;
  text-align: center;
  -webkit-text-shadow: 0 -1px 1px #4c4b4b;
  -moz-text-shadow: 0 -1px 1px #4c4b4b;
  text-shadow: 0 -1px 1px #4c4b4b;
  height: 66px;
  line-height: 66px;
  font-size: 28px;
}
.animated-btn span.icon {
  width: 50px;
  height: 66px;
  background: url("") no-repeat 100% 50%;
}
.animated-btn span.text1 {
  width: 210px;
  display: inline-block;
  text-align: center;
  text-transform: uppercase;
}
.animated-btn span.text2 {
  width: 210px;
  display: inline-block;
  text-align: center;
  font-size: 18px;
}
.animated-btn span.radial {
  width: 0px;
  height: 0px;
  background-color: #fff;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
  -moz-box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
  box-shadow: 1px 1px 30px 30px rgba(255, 255, 255, 0), -1px -1px 30px 30px rgba(255, 255, 255, 0);
  position: absolute;
  top: 50%;
  left: 10%;
}
.animated-btn span.moving {
  width: 0px;
  height: 0px;
  -webkit-box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
  -moz-box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
  box-shadow: 0px 10px 10px 20px rgba(255, 255, 255, 0.9), 0px -10px 10px 20px rgba(255, 255, 255, 0.9);
  position: absolute;
  top: 50%;
  left: -10%;
}

JS

<script type="text/javascript">
$(document).ready(function(){

    var counter = setTimeout(function() {
        animate_btn();
    }); 

    function animate_btn(){

      var step;
      var handle = null;

      var colors = [
        'rgba(255, 255, 255, 0.00)',
        'rgba(255, 255, 255, 0.30)',
        'rgba(255, 255, 255, 0.60)',
        'rgba(255, 255, 255, 0.90)',
        'rgba(255, 255, 255, 1)'
      ];

        setTimeout(function() {
            var x = 0;
            handle = setInterval(function() {

              $('.radial').animate({
                boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
              }, 20);

              x++;
              if (x > colors.length) {

                clearInterval(handle);
                handle = null;
              }
            }, 1);

        }, 150);

        setTimeout(function() {
            var x = 4;
            handle = setInterval(function() {

              $('.radial').animate({
                boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
              }, 20);

              x--;
              if (x < 0) {

                clearInterval(handle);
                handle = null;
              }
            }, 1);

          }, 300);

        setTimeout(function() {
            $('.moving').css({"left":"-10%"});
            $('.moving').animate({"left":"110%"}, 400);

        }, 1000);

        setTimeout(function() {

          $(".animated-btn").children(".text1").delay(600).show("pulsate", {times:1}, 600, function(){
            $(".animated-btn").children(".text1").delay(400).effect("pulsate", {times:1}, 600, function(){
                $(".animated-btn").children(".text1").delay(800).hide("pulsate", {times:1}, 600, function(){
                    $(".animated-btn").children(".text2").delay(400).show("pulsate", {times:1}, 600)
                    });
                });
            });
        }, 2100);

        setTimeout(function() {
            var x = 0;
            handle = setInterval(function() {

              $('.radial').animate({
                boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
              }, 20);

              x++;
              if (x > colors.length) {

                clearInterval(handle);
                handle = null;
              }
            }, 1);

        }, 6250);

        setTimeout(function() {
            var x = 4;
            handle = setInterval(function() {

              $('.radial').animate({
                boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
              }, 20);

              x--;
              if (x < 0) {

                clearInterval(handle);
                handle = null;
              }
            }, 1);

          }, 6400);

        setTimeout(function() {
            $('.moving').css({"left":"-10%"});
            $('.moving').animate({"left":"110%"}, 400);
        }, 6600);

        setTimeout(function() {

            $(".animated-btn").children(".text2").delay(400).effect("pulsate", {times:1}, 600, function(){
                $(".animated-btn").children(".text2").delay(800).hide("pulsate", {times:1}, 600, function(){
                    $(".animated-btn").children(".text1").delay(400).show("pulsate", {times:1}, 600);
                });
            });
        }, 7000);
    }

    counter = setInterval(function() {
        animate_btn();
    }, 15000);
});
</script>

Answer 1

Try animation chaining instead of separate setTimeouts. This is done by adding a function after your animation time. This function gets called after your animation completes, which will prevent your animations from stepping on one another.

For example:

function animate_btn()
{
   $('.radial').animate({
                boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
              }, 20, function() // called at the end of animation
                    {

                     $('.radial').animate({
                        boxShadow: '1px 1px 30px 30px' + colors[x] + ',' + '-1px -1px 30px 30px' + colors[x]
                      }, 20, function() // called at end of animation
                            {
                            animate_btn();  // recursion
                            });

            });

}