jQueryで画像をフワフワさせたい

Question

表題のとおりですが、画像をフワフワさせたいです。
ただ、この画像はスクロールした際に出現させ、クリックしたら上に画面遷移するようにしています。
コードは下記のとおりです。

HTML
<div id="pagetop">
    <a href="#"><img id="sample" src="sample.png" alt="ページトップ画像"></a>
</div>

CSS
#pagetop{
    position: fixed;
    bottom: 50px;
    right: 30px;
    z-index: 100;
}

Javascript
$(function(){
    $('#pagetop').hide();
    $(window).scroll(function(){
        if ($(this).scrollTop() > 1000) {
            $('#pagetop').fadeIn();
        }
        else {
            $('#pagetop').fadeOut();
        }
    });
    $('#pagetop').click(function(){
        $('html,body').animate({
            scrollTop: 0 }, 1000);
        return false;
    });
});

このコードをどのようにしたら
画像をフワフワさせることができるでしょうか？
CSSをあてないで下記コードをあてるとフワフワできるのですが、
組み合わせると上手くいきません。

$(function () {
    setTimeout('rect()'); 
});

function rect() {
    $('#pagetop').animate({
        marginTop: '-=10px'
    }, 800).animate({
        marginTop: '+=10px'
    }, 800);
    setTimeout('rect()', 1600); //ア
}

お詳しい方、ご教示いただけると幸いです。
よろしくお願いします。

Comments

[m.ts10806]

コードやエラーはマークダウンのcode機能を利用してご提示ください。
https://teratail.com/questions/238564

[abebe]

使い方がよくわかってなく、わかりにくくすいません。修正しました。

Answer 1

CSSアニメーションを使えばできると思います。jQueryを使うより軽いのでお勧めです。

「フワフワ」というのが具体的にどのようなものなのか不明なので、
適当に上下移動と回転を組み合わせてみました。

.updown {
  animation: updown 1s infinite ease-in-out alternate;
}
.roll {
  animation: roll 1.3s infinite ease-in-out alternate;  
}

@keyframes updown {
  0% {transform: translateY(-5px)}
  100% {transform: translateY(5px);}
}

@keyframes roll {
  0% {transform: rotate(-5deg);}
  100% {transform: rotate(5deg);}
}

<div id="pagetop" class="updown">
  <a href="#"><img id="sample" src="sample.png" alt="ページトップ画像" class="roll"></a>
</div>

CodePenサンプル

transformをうまく使えばもっと複雑な動きも可能です。

---

jQueryでふわふわするコードがあったのを見落としてました。
そのコードでうまくいかない原因は、position: fixed; の要素にはmarginが効かないからです。bottom を変化させればふわふわします。（でも、CSSアニメーションをお勧めしますが）

$(function () {
   setTimeout('rect()');
});
function rect() {
   $('#pagetop').animate({
       bottom: '-=10px'
   }, 800).animate({
       bottom: '+=10px'
   }, 800);
   setTimeout('rect()', 1600); //ア
}

Comments

[abebe]

教えていただいた手順で無事ふわふわさせることができました！
まさか、こんなに直ぐ的確な回答が来るとは思ってもみなかったので驚きです。
また、具体的かつ、違うパターンの方法も教えていただき参考になりました。
せっかくですのでCSSでフワフワさせたいと思います。

この度はご回答ありがとうございました。