动画容易进出时，悬停一个链接

Animate easy in and easy out when hover a link

本文关键字：一个 链接 悬停 易进出 动画      更新时间：2023-09-26

大家好，我想做一个类似于这个网站的菜单:http://tommasoraspo.com/creativepartners/DesignLovers/index.html

但我不知道我将如何动画书签显示当我悬停一个链接。我想在使用animation .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);         
        });
}

您指向的网站没有使用javascript。相反，他们使用css3过渡来动画图像的背景位置，当网站加载时，它是"脱离画布"的。

这里有一个相关的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;
}
相关文章：