基本 jquery 鼠标悬停动画

Basic jquery mouseover animation

本文关键字：动画 悬停 鼠标 jquery 基本      更新时间：2023-09-26

嗨，我如何在动画上制作一个简单的鼠标到这个标志？我想要的是id徽标可能会下降300px，在里面我会把我的链接作为导航

<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>

小提琴

使用鼠标输入并离开

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

 $('#logo').mouseenter(function(){
     $('.content > h1').css('marginTop','30px')
 }).mouseleave(function(){
     $('.content > h1').css('marginTop','0px') 
 });

修改此 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，您就可以根据需要多次悬停和离开，而不是仅限于一次。

工作 js小提琴

相关文章：