0

嗨，我怎样才能为这个标志制作一个简单的鼠标动画？我想要的是 id 徽标可能会下降 300 像素，在里面我将把我的链接作为导航

<body>
<div class="content">
    <div id="logo"><img src="http://upload.wikimedia.org/wikipedia/en/thumb/4/45/Google-Wallet-logo.svg/283px-Google-Wallet-logo.svg.png" alt="" /></div>
    <h1 class="title">Hello Moto</h1>
</div>
</body>

小提琴

4

2 回答 2

1

使用鼠标进入和离开

一个工作示例小提琴，我在悬停时移动文本：http: //jsfiddle.net/hzbRb/1/

 $('#logo').mouseenter(function(){
     $('.content > h1').css('marginTop','30px')
 }).mouseleave(function(){
     $('.content > h1').css('marginTop','0px') 
 });
于 2013-09-14T09:13:45.773 回答
0

修改这个 CSS

#logo {
    background: #f8b133;
    width: 200px;
    height: 200px;
    max-height: 500px !important; // this is critical!!
    margin: 0 auto;
    z-index: 1;
}

jQuery

$("#logo").on('mouseover', function () {
    $("#logo").animate({
        opacity: 0.95,
        height: "+=300"
    }, 250, function () {
        // Animation complete.
        // Show Navigation
    });
});
$("#logo").on('mouseleave',function () {
    // Hide Navigation
    $("#logo").animate({
        opacity: 1,
        height : "-=300"
    }, 250, function() {
    });
 });

我给了它一点不透明度，这样你的导航可能会显示得更好一点，你会注意到我使用了.one()委托，所以每次鼠标悬停时它不会继续向下移动。 编辑后动画现在会运行得更快一些，只要您更改 CSS，您就可以根据需要多次悬停和离开，而不是仅限于一次。

working jsFiddle

于 2013-09-14T09:18:33.140 回答