jQuery continuous grow/shrink

I'd like to draw attention to certain images on my site by making them grow and shrink slightly, over and over.

I'm not 开发者_运维百科sure how to go about making this kind of infinite animation. Any tips?

Make sure this code runs after the image has loaded. My demo does this by running after window.load, not after document.ready (which fires too early in Chrome).

HTML

<img id="kitteh" alt="awwww" src="http://placekitten.com/200/300"/>

JavaScript

var $img = $('#kitteh'),
    scale = 1.1,
    h = $img.height(),
    sh = h*scale;

function scaleUp($elt)
{
    $elt.animate({height: sh}, function ()
    {
        scaleDown($elt);
    });
}

function scaleDown($elt)
{
    $elt.animate({height: h}, function ()
    {
        scaleUp($elt);
    });
}

scaleUp($img);

Demo →

Yeah, something like:

function grow(factor) {
  if (factor === undefined) factor = 2;
  $('img').each(function() {
    $(this).animate({'width': $(this).width() * factor, 'height': $(this).height() * factor}, 2000);
  });
}

function shrink(factor) {
  grow(1.0/factor);
}

Or your can use LightBox for jQuery :) http://leandrovieira.com/projects/jquery/lightbox/

you can do:

var intDuration = 1000; //time in ms
setInterval(
   function(){
      $('selector').animate(/*some animation*/,'slow');
   }, 
   intDuration
);

setInterval will make the function repeat every intDuration milliseconds :-)

check it out in action here: http://jsfiddle.net/maniator/cf4jt/

That example uses:

JS:

var intDuration = 2000; //time in ms
setInterval(
   function(){
       $('#image').animate({"width": "-=100px"},'slow').delay(1000)
           .animate({"width": "+=100px"},'slow');
   }, 
   intDuration
);

HTML:

<img src="http://placehold.it/350/0000FF" id='image'>

Here's one way by creating a plugin to pulse any set of elements you specify:

$.fn.pulseSize = function() {
    var pulseTime = 2000,
        pulseDiff = 10;

    this.animate({height:'+='+pulseDiff,
                  width:'+='+pulseDiff},pulseTime*.2,function(){
        $(this).animate({height:'-='+pulseDiff, 
                         width:'-='+pulseDiff},pulseTime*.8,function(){
            $(this).pulseSize();
        });
    });
};

$('div.pulse').pulseSize();

See example →