jQuery连续增长/收缩

我想通过让我的网站上的某些图片一次又一次地轻微地增长和收缩来吸引人们的注意

我不知道如何制作这种无限的动画。有什么建议吗？

您可以：

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

setInterval

将使函数每隔

intDuration

毫秒重复一次：-）

请在此处查看实际操作：

该示例使用：

JS:

HTML:

是的，类似于：

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);
}

---

或者您可以使用LightBox for jQuery:）

这里有一种方法，通过创建一个插件来为您指定的任何一组元素提供脉冲：

$.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();

---

确保在加载图像后运行此代码。我的演示程序是在

window.load

之后运行，而不是在

document.ready

之后运行（在Chrome中启动得太早）

HTML

---

谢谢您的帮助。我选择它作为正确答案，因为它说明了在图像加载后运行。

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);
}

$.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();

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

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);