Question

我已经包含了一个指向jQuery网站的标签，但我的单独的内联标签在浏览器中没有做任何事情。甚至没有错误消息。我几乎可以肯定我没有语法错误，我的文件路径是正确的，但我不知道还有什么可能导致问题。

<script src="http://code.jquery.com/jquery-1.11.3.js"></script>
<script>
    $(document).ready(function(){
        $('#menu-wrapper').click(function(){
        $('#slide-menu').animate({
            left: '0px'
        }, 250);

        $('body').animate({
            left: '15%'
        }, 250);
        });
    });
</script>

这些是脚本标签。整个页面位于http://budbranchblossom.com

修改 jquery工作正常，但是css样式存在问题。

Answer 1

动画整个身体并不好，因为你移动所有东西，也就是你的幻灯片菜单，这意味着您需要为幻灯片菜单设置动画15％，因为整个身体留下了15％
因性能而使用transform translate
使用％制作动画在小型网站上是可以的，在大型网站上这是一个性能问题。而是使用400ms（用户认为没有发生任何事情之前的时间）来获得你想要动画的px。

针对您的问题： 没有任何事情发生，因为你的身体需要绝对（实际上不是很好）并且你的网站菜单缺少顶部：0px;它也应该有一个z-index

如果你添加：

alert("start")

到您的点击功能，您会看到点击确实有效。

Answer 2

您的代码按预期工作。您在网页中看不到任何内容的原因是因为body不在position适用于考虑您动画的left属性，因此您应该添加{z-index 1}}属性，以便能够正确地看到它们。

菜单无法正确滑出

2 个答案: