這個動畫是如何完成的？

Question

我喜歡this little animation顯示的方式

在最左上角，當我們將鼠標懸停在徽標上時，顯示Home文本。

這怎麼可能？我檢查了CSS並沒有找到。

感謝您的幫助。

Answer 1

這是做它的一段腳本：

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文件

Answer 2

在它通過JavaScript實現的網站，但是這是沒有必要的。

這是一個簡單的過渡：

正常方式時

top:0; 

和懸停風格

top:-51px; 

與

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

結合，這樣的圖片：

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

注意：轉換在Internet Explorer 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如此高度的一半，這隻能說明一個圖像一次。

Here is an Example同時具有JS和CSS版本。

Answer 3

它可以用純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