Question

我正在尝试使用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');
    }); 
});

Answer 1

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

$(function(){

  // code here
})

Answer 2

你需要包装jquery的东西，以便在DOM准备好之后加载...

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

JSFiddle正在为你做这件事。你在本地遇到的问题是javascript在文档加载之前运行，所以当选择器选择时，没有什么可以选择的。如果在DOM准备就绪后运行，那么它可以正常选择页面上的HTML元素。

JQUERY滑动门效果 - 适用于jsFiddle，但不适用于镀铬

2 个答案: