Question

In the page I have an arrow, which is hidden at the beginning. When I click a button, the arrow shows.

I want a feature that the arrow continuously becomes bigger and returns to the original size, and then becomes bigger again, showing an expression of paying attention to where it points.

Answer 1

DEMO jsBin

Code used:

<img id="arrow" src="arrow.png">

var ar = $('#arrow');
function pulsate(){ 
  ar.animate({width:'+=5',height:'+=5'},300,function(){
    ar.animate({width:'-=5',height:'-=5'},300,pulsate);
  });
}
pulsate();

(Hope that’s what you were looking for…)

---

P.S.
You can also encapsulate the function like:

var ar = $('#arrow');
(function tic(){ 
  ar.animate({width:'+=5',height:'+=5'},300,function(){
    ar.animate({width:'-=5',height:'-=5'},300,tic);
  });
})();