jQuery 连续增长/收缩答案

【问题标题】：jQuery continuous grow/shrinkjQuery 连续增长/收缩
【发布时间】：2011-03-23 22:12:24
【问题描述】：

我想通过使它们一遍又一遍地轻微放大和缩小来引起人们对我网站上某些图片的注意。

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

【问题讨论】：

【解决方案1】：

确保此代码在图像加载后运行。我的演示通过在window.load 之后运行，而不是在document.ready（在 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 →

【讨论】：

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

【解决方案2】：

你可以这样做：

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

setInterval 将使函数每intDuration 毫秒重复一次:-)

在此处查看实际操作：http://jsfiddle.net/maniator/cf4jt/

该示例使用：

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

【讨论】：

【解决方案3】：

是的，类似于：

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 :) http://leandrovieira.com/projects/jquery/lightbox/

【讨论】：

【解决方案4】：

这是创建一个插件来脉冲您指定的任何元素集的一种方法：

$.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 →

【讨论】：