這個動畫是如何完成的？

-2

我喜歡this little animation顯示的方式這個動畫是如何完成的？

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

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

感謝您的幫助。

2012-07-24 Bronzato

這是做它的一段腳本：

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

來源

2012-07-24 11:30:16 Joon

感謝你的幫助。 – Bronzato 2012-07-24 15:04:43

在它通過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版本。

來源

2012-07-24 11:30:34 Christoph

css3轉換在ie – donald123 2012-07-24 11:37:29

中不起作用雖然這會偶爾有效，但OP會更適合使用Javascript來確保進一步的跨瀏覽器兼容性，直到CSS轉換兼容的瀏覽器開始佔據大部分市場份額。 – Jeremy1026 2012-07-24 11:41:26

添加了javascript解決方案。不過，我更喜歡純CSS解決方案，因爲這些轉換具有優雅的降級。如果您使用的是jQuery，則爲 – Christoph 2012-07-24 11:42:56

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

來源

2012-07-24 12:43:11

這個動畫是如何完成的？

回答

相關問題