Javascript 悬停时设置div动画

我有一个导航条，从屏幕的右边缘伸出一点。我想要它，所以当你在div上悬停时，它会从浏览器的右侧向左滑动550px。我正在使用jquery的动画功能，我让它在悬停时正确地动画，但当你停止悬停时，我无法让它滑回右边

我对javascript/jquery非常陌生，我觉得我缺少了一些简单的东西

$(document).ready(function(){
$("#nav").hover(function() {
    $(this).animate({ 
    right: "0px",
    }, 800 );

    (function() {
    $(this).animate({ 
    right: "-550px",
  }, 800 );

});
});
});

下面是#nav的css：

#nav {
position: absolute;
right: -550px;
min-width: 300px;
top: 10px;
height: 50px;
background-color: #B30431;
}

---

代码有一些语法错误。代码应为：

$(document).ready(function(){
    $("#nav").hover(
        function() {
            $(this).animate({ right: "0px" }, 800 );
        },
        function() {
            $(this).animate({ right: "-550px" }, 800);
        }
    });
});

---

祝你好运

代码有一些语法错误。代码应为：

$(document).ready(function(){
    $("#nav").hover(
        function() {
            $(this).animate({ right: "0px" }, 800 );
        },
        function() {
            $(this).animate({ right: "-550px" }, 800);
        }
    });
});

---

祝你好运

您使悬停函数变得复杂，您用

（）

包装了函数，而您的函数没有执行

$(document).ready(function() {
    $("#nav").hover(function() {
        $(this).animate({ right: "0px" }, 800);
    }, function() {
        $(this).animate({ right: "-550px" }, 800);
    });
});​

---

您使悬停函数变得复杂，使用

（）

包装该函数，而您的函数未执行

$(document).ready(function() {
    $("#nav").hover(function() {
        $(this).animate({ right: "0px" }, 800);
    }, function() {
        $(this).animate({ right: "-550px" }, 800);
    });
});​

---

我们在动画中经常使用的一个选项是创建一个包含该动画的css类，然后使用

.addClass（）

方法触发动画。它的速度快，并且与浏览器兼容。您也可以使用纯css来实现此目的。

我们在动画中经常使用的一个选项是创建一个包含该动画的css类，然后使用

.addClass（）

方法触发动画。它的速度快，并且与浏览器兼容。您也可以使用纯css来实现这一点。

您可以试试这个

你可以试试这个

---

你能不能加一个JSFIDLE？呃，不能告诉你！我不知道那是什么。它在悬停时可以正常工作，但当你停止悬停而不是向后滑动时，它只是停留在那里。我在想我只是没有正确地回电话。你可以添加一个JSFIDLE吗？呃，不能告诉你！我不知道那是什么。它在悬停时可以正常工作，但当你停止悬停而不是向后滑动时，它只是停留在那里。我在想我只是没有正确地回电话。