CODEWITHSUNDEEP
jqueryjquery-animateinfinite-loop
HWD
HWD

Reputation: 1629

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?

Upvotes: 0

Views: 5714

Answers (4)

Matt Ball
Matt Ball

Reputation: 359776

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 →

Upvotes: 2

mVChr
mVChr

Reputation: 50177

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 →

Upvotes: 1

Naftali
Naftali

Reputation: 146302

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'>

Upvotes: 1

www.data-blogger.com
www.data-blogger.com

Reputation: 4164

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/

Upvotes: 1

Related Questions