jquery - このアニメーションはどのように行われますか？

Question

この小さなアニメーションの表示方法が好き です

左上にロゴの上にマウスを置くと、Homeテキストが表示されます。

これはどのように可能ですか？cssを確認しましたが、見つかりませんでした。

ご協力いただきありがとうございます。

Answer 1

サイトでは、JavaScriptを介して実現されていますが、必須ではありません。

これは単純な移行です。

通常のスタイルは

top:0;

とホバースタイル

top:-51px;

と組み合わせ

transition: all 1s/*the time*/;

そしてそのような画像：

+-------+
| Gidsy |
|       |
|  Home |
+-------+

注：移行は、InternetExplorerバージョン9以下では機能しません。改善および簡略化されたJavascript（jQuery）は次のようになります。

$(".blue-arrow a").hover(
     /* mouse-in */
     function(){
         $(".logo").stop().animate({top:-51},200);
     },
     /* mouse-out */
     function(){
         $(".logo").stop().animate({top:0},200);
     }
);

両方のバージョンを正しく機能させるには、問題の画像の半分の高さで、overflow:hidden一度に1つの画像のみが表示されるようにするラッピング要素が必要です。

これは、JSバージョンとCSSバージョンの両方を使用した例です。

Answer 2

それは純粋なCSSで非常に簡単に行うことができます：

<div class="logo"><a href="#">Text 1<br />Text 2</a></div>

.logo {
    font-family: Arial;
    color: #000;
    font-size: 25px;
    font-weight: bold;
    height: 25px;
    overflow: hidden;
}
a {
   height: 25px; 
   color: #000;
   display: inline-block;
   -o-transition: margin 0.3s;
   -moz-transition: margin 0.3s;
   -webkit-transition: margin 0.3s;
}
.logo:hover a {
   margin-top: -30px;
}

ライブデモ：Tinkerbin

Answer 3

これはそれを行うスクリプトの一部です：

function home_button(){
    $(".blue-arrow a")
        .mouseenter(function(){
            if($("body").hasClass("homepage")!==true){
                $(".logo").stop().animate({top:-51},200);
            }
        })
        .mouseleave(function(){
            $(".logo").stop().animate({top:0},200);
        })
        .mousedown(function(){
                $(".header-bar .light-area").css("backgroundColor","#005995");
        })
}

https://d3pvklq8xnxxh2.cloudfront.net/cache/js/base.0b56986.jsファイルで発生します