2

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

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

编辑：还发现我的代码似乎不起作用。我在关注如何制作推拉门效果？，由 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');
    }); 
});
4

2 回答 2

1

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

$(function(){

  // code here
})
于 2012-10-19T18:52:45.310 回答
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 元素。

于 2012-10-19T18:53:15.903 回答