トップへ戻るボタンをクリックして、動いている間は画像が半透明になる

Question

実現したいこと

①トップへ戻る画像をクリック
②トップに向けて画面が動き出す
③上に戻るまでの間、画像は半透明になる

この③の部分を実現したいのですがどこにどのような指定をすればいいのかわからず質問させていただきます。
下記、HTML・css・jsです。

<div id="top_scroll">
   <a href="#" id="page-top1"><img src="https://placehold.jp/50x76.png" alt="TOPへ" /></a>
</div>

#top_scroll{ 
    position: relative; 
    z-index: 100; 
    margin: 0; 
    padding: 0; 
}
#page-top1{
    display: block;
    position: fixed;
    z-index: 9999;
    bottom: -250px;
    right: 10px;
    width: 50px;
    height: 76px;
    padding: 0;
    color: #222;
    text-align: center;
    text-decoration: none;
    transition: 1s;
        -webkit-transition: 1s;
}
#page-top1:hover{ 
    transform: translateY(-10px);
}
#top_scroll:hover{
    background: #fff;
}

$(function(){   
      var pageTop1 = $("#page-top1");
      pageTop1.click(function () {
        $('body, html').animate({ scrollTop: 0 }, 500);
        return false;
      });
      $(window).scroll(function () {
        if($(this).scrollTop() >= 200) {
          pageTop1.css( "bottom", "20px" );
        } else {
          pageTop1.css( "bottom", "-85px" );
        }
      });
    });

お分かりになられる方いらっしゃいましたら、お助け下さい。
よろしくお願いします。

Answer 1

.animate()する前に半透明にして、.animate()のコールバックで戻せばよいと思います。

【jQueryでアニメーション処理（「.animate()」）完了後に別の処理を実行させる方法 | BlackFlag】
http://black-flag.net/jquery/20110406-2889.html

【.animate() | jQuery API Documentation】
http://api.jquery.com/animate/

Comments

[satoshickkk]

ありがとうございます。
試してみたところ書いている場所が違うのか、一番上へ戻った後に半透明になります。

$(function(){
var pageTop1 = $("#page-top1");
pageTop1.click(function () {
$('body, html').animate({ scrollTop: 0 }, 500);
$(this).stop().animate({opacity: '0.5'},500);
return false;
});
$(window).scroll(function () {
if($(this).scrollTop() >= 200) {
pageTop1.css( "bottom", "20px" );
} else {
pageTop1.css( "bottom", "-85px" );
}
});
});

[kei344]

「.animate()する前に」「コールバックで戻せばよい」がどちらも書かれていませんね。

[kei344]

> eekkhhさん
ここはコメントなので、回答に書かれては？

[satoshickkk]

kei344さん、eekkhhさん回答ありがとうございます。
言われた通り「.animate()する前に」「コールバックで戻す」を
#top_scrollに半透明をかけたら無事に実装することができました。
ありがとうございました。