動畫容易，容易出懸停在鏈接

Question

嗨，大家好，我想做出類似這個網站的菜單：http://tommasoraspo.com/creativepartners/DesignLovers/index.html

但我不知道我怎麼會動畫書籤展現出來時，我一懸停鏈接。我想在使用animate.css（slideInDown動畫），但它只會顯示時懸停結束，但懸停時不會回來。

啓動懸停動畫：

function animationHover(element, animation){ 
    element = $(element); 
    element.hover(
     function() { 
      element.addClass('animated ' + animation);   
     }, 
     function(){ 
      //wait for animation to finish before removing classes 
      window.setTimeout(function(){ 
       element.removeClass('animated ' + animation); 
      }, 2000);   
     }); 
} 

Answer 1

您指向該網站沒有使用的JavaScript。相反，他們正在使用css3轉換來爲加載站點時「畫布外」的圖像的背景位置設置動畫。

這是一個fiddle與相關的CSS/HTML。

您可能需要調整值以適合您的特定設計和圖像。

HTML：

<ul class="nav"> 
    <li><a href="#">Menu Item 1</a> 

    </li> 
    <li><a href="#">Menu Item 2</a> 

    </li> 
    <li><a href="#">Menu Item 3</a> 

    </li> 
    <li><a href="#">Menu Item 4</a> 

    </li> 
</ul> 

CSS：

ul.nav { 
    list-style: none; 
    margin: 0; 
} 
ul.nav li { 
    float: left; 
    margin: 0 0 0 30px; 
} 
ul.nav li.current a, ul.nav li a:hover { 
    background-position: 50% 0; 
} 
ul.nav li a { 
    height: 50px; 
    line-height: 50px; 
    display: block; 
    padding: 50px 20px 0; 
    position: relative; 
    background: url(http://lorempixel.com/50/70/abstract/) no-repeat 50% -90px; 
    -webkit-transition: background-position 0.2s linear; 
    -moz-transition: background-position 0.2s linear; 
    transition: background-position 0.2s linear; 
}