jQuery连续增长/缩小

Question

我想通过让它们一遍又一遍地变大和缩小来吸引对我网站上某些图像的注意。

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

Answer 1

你可以这样做：

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

Answer 2

确保此代码在图片加载后运行。我的演示是在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 → 的

Answer 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/

Answer 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 →