jQuery3.2.1で要素の大きさ(width, height)を拡大縮小するアニメーションの実装。
jQueryである要素を一定の間隔で拡大縮小(膨らんだり、縮んだり)を永続的にさせる効果を実装したいのですが。
思うように動かず困っております。
jQueryもですし、Javascript自体触ったばかりで初歩的な内容で申し訳ありません。
対象の要素:btn1
CSS:width: 300px;,height: 60px
jQueryコード:
$(function () {
setTimeout('rect()');
});
function rect() {
$('.btn1').animate({
maxWidth: '+=20px',
maxHeight: '+=20px'
}, 1200).animate({
maxWidth: '-=20px',
maxHeight: '-=20px'
}, 1200);
setTimeout('rect()', 2000);
}
上記を実行すると、左端から少しずつ本来のボタン要素が形成されていき、本来のボタン要素の大きさになった時点で動作が止まったように見える状態です。
よろしくお願いいたします。