pulsate button twice after page load

Question

I am trying to let a button pulsate twice after dom ready. I tried first with @-webkit-keyframes pulsate but this is doing the work before everything is loaded. So I guess I need JS.

This is like changing opacity but how to make the button resizing (i.e. increase/decrease padding) instead like a real heart?

$(document).ready(function() {
  $(".button").effect("pulsate", {
    times: 2
  }, 3000);
});

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
</script>
<a class="button" href="#" style="padding: 5px 17px;background:red;color:white;">buy now</a>

You can do it like https://stackoverflow.com/questions/4095475/jquery-animate-padding-to-zero — Ali Soltani, Jan 30 '18 at 03:47
@AliSoltani thats a great idea! But how can I do this on domready without hovering with the mouse? — Krystian, Jan 30 '18 at 07:34

score 1 · Accepted Answer · answered Jan 30 '18 at 10:55

You can do it like this:

$(document).ready(function() {
    for (var i = 0; i < 2; i++ ) {
        $(".button")
            .animate( { backgroundColor: "#f00" , 'padding' : 10}, 3000)
            .animate( { backgroundColor: "transparent" , 'padding' : 0 }, 3000);
    }
});

Online demo (jsFiddle)

pulsate button twice after page load

1 Answers1