JQUERY 推拉门效果 - 适用于 jsFiddle 但不适用于 chrome答案

【问题标题】：JQUERY Sliding door effect - works in jsFiddle but not chromeJQUERY 推拉门效果 - 适用于 jsFiddle 但不适用于 chrome
【发布时间】：2012-10-20 02:55:01
【问题描述】：

我正在尝试使用 jquery 来制作推拉门效果。我已经在 jsFiddle 中模拟了它，它在那里工作正常。我遇到的问题是，当我在本地运行它时，没有任何效果。我已经下载并链接到本地的 jquery 库，我还有另一个项目，我什至链接到 API，它工作得很好。我不明白这里发生了什么，据我所知一切正常，但是当我点击链接时没有任何反应。

这里是 jsfiddle 的链接 http://jsfiddle.net/aosto/kU9HY/

编辑：还发现我的代码似乎不起作用。我正在关注 how to make a sliding door effect?，这是 orbling 提供的方向。但我想我可能把 CSS 搞砸了。不知道如何最初隐藏其他人并使一个可见。任何帮助将不胜感激。

<!doctype html>
<html>
<head>
<title>DBKustoms</title>
<link rel="stylesheet" href="./css/style.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js">    </script>
<script src="./js/include.js"></script>

</head>
<body>

<div id="menu-container">
    <div id="cover"></div>
    <div id="menu-home" class="menu"></div>
    <div id="menu-contact" class="menu">contact</div>
    <div id="menu-services" class="menu"></div>
    <div id="menu-photo" class="menu"></div>
</div>


<div id="buttons">
    <div id="home" class="menu-button">Home</div>
    <div id="contact" class="menu-button">Contact</div>
    <div id="services" class="menu-button">Services</div>
    <div id="photo" class="menu-button">Photo</div>
</div>

</body>
</html>

CSS

#menu-container {
    float:left;
    width: 200px;
    height: 300px;
    clip: auto;
    overflow: hidden;
    position: relative;
    }

#cover    {
    width: 100%;
    height: 100%;
    position: absolute;
    top: -200px;
    background: black;
    z-index:1000;    
    }

#menu-home {
    width:100%;
    height:100%;
    background:blue;
    }

#menu-services {
    Height:100%;
    width:100%;
    background:purple;

    }

#menu-contact {
    Height:100%;
    width:100%;
    background:yellow;
    }

#menu-photo {
    Height:100%;
    width:100%;
    background:brown;

}

#buttons {
    float:left;
}

和 JS

$('.menu-button').click(function() {
    var cMenuButton = $(this);
    var cMenuID = cMenuButton.attr('id');

    var coverHeight = $('#cover').height();
    var cVisibleMenu = $('.menu:visible');
    var cVisibleHeight = cVisibleMenu.height();

    $('#cover').animate({'height': coverHeight + cVisibleHeight}, 600, 'linear', function() {
        $('.menu').hide();
        $('#menu-' + cMenuID).show();

        var newMenuHeight = $('#menu-' + cMenuID).height();
        var coverHeight = $('#cover').height();

        $('#cover').animate({'height': coverHeight - newMenuHeight}, 600, 'linear');
    }); 
});

【问题讨论】：

标签： jquery css

【解决方案1】：

您需要包装 jquery 的内容，以便在 DOM 准备好后加载...

$(function(){
    // your js here
})

JSFiddle 正在为您做到这一点。 The problem you encounter locally, is that the javascript runs before the document has loaded, so when the selector is selecting, there is nothing to select.如果你在 DOM 准备好之后运行，那么它可以正常选择页面上的 HTML 元素。

【讨论】：

【解决方案2】：

确保将您的代码放入document.ready。在您的 jsfiddle 左侧有一个下拉菜单，其中包含为您包装代码的 onDomReady 选项。在本地你没有，因此它适用于 jsfiddle。

$(function(){

  // code here
})

【讨论】：

这是有道理的。抱歉，我对这一切还很陌生。
如果这有助于解决您的问题，请标记为已回答。谢谢！