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

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

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); //ア
}

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

m.ts10806

2020/09/13 21:24

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

abebe

2020/09/13 21:44

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

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

css
1.updown {
2  animation: updown 1s infinite ease-in-out alternate;
3}
4.roll {
5  animation: roll 1.3s infinite ease-in-out alternate;  
6}
7
8@keyframes updown {
9  0% {transform: translateY(-5px)}
10  100% {transform: translateY(5px);}
11}
12
13@keyframes roll {
14  0% {transform: rotate(-5deg);}
15  100% {transform: rotate(5deg);}
16}

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

CodePenサンプル

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

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

js
1$(function () {
2   setTimeout('rect()');
3});
4function rect() {
5   $('#pagetop').animate({
6       bottom: '-=10px'
7   }, 800).animate({
8       bottom: '+=10px'
9   }, 800);
10   setTimeout('rect()', 1600); //ア
11}