javascript - 将鼠标悬停在链接上时，动画轻松进出

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 转换来为加载站点时“脱离 Canvas ”的图像的背景位置设置动画。

这是一个 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;
}