JQuery непрерывный рост / сжатие

Question

Я хотел бы привлечь внимание к определенным изображениям на моем сайте, заставляя их немного увеличиваться и уменьшаться в размерах.

Я не уверен, как сделать такую ​​бесконечную анимацию.Любые советы?

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

Демонстрация →

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

Answer 3

Вот один из способов создания плагина для импульсного набора любых указанных вами элементов:

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

См. Пример →

Answer 4

Да, что-то вроде:

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