2

jqueryを使用して引き戸効果を実行しようとしています。jsFiddleでモックアップしましたが、そこでは問題なく動作します。私が抱えている問題は、ローカルで実行すると何も機能しないことです。jqueryライブラリをローカルにダウンロードしてリンクしましたが、APIにリンクする別のプロジェクトがあり、問題なく動作します。すべてが正常に読み込まれていることがわかる限り、ここで何が起こっているのかわかりませんが、リンクをクリックしても何も起こりません。

ここにjsfiddleのリンクがあります http://jsfiddle.net/aosto/kU9HY/

編集：また、私のコードが機能していないようです。スライドドア効果を作成する方法をフォローしていますか？、オーブリングによって提供される方向。しかし、私はCSSを台無しにしているかもしれないと思います。最初に他のものを非表示にして1つを表示する方法がわかりません。どんな助けでもいただければ幸いです。

<!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

DOMの準備ができた後にロードされるようにjqueryのものをラップする必要があります...

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

JSFiddleはあなたのためにそれをやっています。ローカルで発生する問題は、ドキュメントが読み込まれる前にjavascriptが実行されるため、セレクターが選択しているときに、選択するものがないことです。DOMの準備ができた後に実行すると、通常どおりページ上のHTML要素を選択できます。

于 2012-10-19T18:53:15.903 に答える