Javascript 基本jquery鼠标悬停动画_Javascript_Jquery

Javascript 基本jquery鼠标悬停动画

javascript jquery

Javascript 基本jquery鼠标悬停动画,javascript,jquery,Javascript,Jquery,您好，我如何可以制作一个简单的鼠标动画到这个标志？我想要的是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" al

您好，我如何可以制作一个简单的鼠标动画到这个标志？我想要的是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>


你好 摩托

使用鼠标指针离开

我在悬停时移动文本的一个工作示例小提琴：

修改此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即可

这是一个链接，这不是解决此类问题的合适网站。自己尝试一下，如果你遇到问题，我们会帮助你。你想让它从原来的位置向下移动300px，还是在底部增加300px？这类问题有很多答案，问题是我只能使用javascript，而不是凭空创建。所以这里会有很多人来帮我做这件事。这件事做得很好！谢谢我将只寻找一种方法，使其轻松和顺利…这也是非常好的，我只是写高度：“+=300”而不是margintop，它的工作非常完美！但是如果我把鼠标放出来，它还能回到200px吗？当然！让我给你更新小提琴。好了，看看你喜欢不喜欢。

$("#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() {
    });
 });