私はjQueryを初めて使用し、非常に単純なことをしようとしていますが、それほど単純ではないようです。
DIV 内にメニューがあり、DIV の幅は 500px、メニューの幅は 250px です。メニューの上にボタンを配置しました。アイデアは、誰かがボタンをクリックすると、メニューが DIV の左から右に移動するというものです。
まあ、それは機能していません。
フィドル: http://jsfiddle.net/KUR52/およびコード:
<div class="menuWrap">
<a href="#" class="button"> MENU </a>
<nav class="menu">
<ul>
<li>Lorem ipsum dolor</li>
<li>Aenean commodo</li>
<li>Aenean massa</li>
<li>Lorem ipsum</li>
<li>Aenean</li>
<li>Aenean massa</li>
<li>Lorem ipsum </li>
<li>Aenean </li>
<li>Aenean massa cum </li>
</ul>
</nav>
CSS
.button {
display: block;
background-color: gray;
height: 50px;
width: 50px;
}
.menuWrap {
width: 500px;
background-color: lightblue;
}
.menu {
position: relative;
/* left:250px; */
left:0;
width: 250px;
background-color: orange;
}
.menu ul{
margin: 0;
padding: 0;
list-style:none;
}
jQuery
$(document).ready(function () {
$('.button').click(function () {
$('.menu').toggle(function () {
$(this).animate({left:'250px'}, 300)
}, function () {
$(this).animate({left:'0px'}, 300)
}
);
});
});
私はいくつかの可能な解決策を見つけましたが、それらを機能させることができません.最も有望なのはこれでした.主に、私が理解していないことparseInt
と、そこから得た価値をどのように使用するかが原因です。これは私の失敗した試みですhttp://jsfiddle.net/W5avM/
私が間違っているのは何ですか?