Question

我试图学习一些jquery，所以我想做一个响应式菜单。菜单目前是“隐藏”（从身体-250px左侧），我有一个图像，所以我想当我点击图像#menu div从左边获得动画250px（所以它将在主页面显示）和主要身体也变得动画也留250px（类似#menu推身体250px）。这是我制作的代码，但是当前没有工作，我在控制台日志中没有错误。

#menu {
position:relative;
float:left;
left:-250px;
}


<img id="menu-icon" src="images/menu_icon.png"/>
<div id="menu">
<ul>
<li>Home</li>
<li>Login/Register</li>
<li>About</li>
<li>Contact</li>
<li>Random</li>
</ul>
</div>


$('#menu-icon').click(function(){
    $('#menu').animate({
    left : "250px" }, 5000, function() {
        $(document).animate({
    left: "250px" 
    });
 });
});

有人能为我做错了吗？我也试过这样做：

$('menu').css("left","250px");

但也没有发生任何事。

Answer 1

我认为这是一个更好的解决方案：

CSS：

body {
    position : relative;
}

JS：

$('#menu-icon').click(function(){
    $('body').animate({
        marginLeft : '250px' 
    }, 500);
});

演示：http://jsfiddle.net/7tgkt7b9/

Answer 2

希望，如果没有将代码放在ready处理程序中，那么您将在关闭正文的末尾获得代码。接下来你想要对身体进行动画制作。所以，使用'body'而不是文档。

$(document).ready(function(){
$('#menu-icon').click(function(){
    $('#menu').animate({
    left : "250px" }, 5000, function() {
        $('body').animate({
    left: "250px" 
    });
 });
});
});

如果你想通过添加250px每次动画，那么使用“+ = 250px”

jquery制作一个动画菜单，也可以激活主体

2 个答案: