0

クリックすると、divが上に移動してほとんど非表示になり、もう一度クリックすると元の位置に戻ります。うん……そうじゃない。アニメートを使用してdivを+100px、次に-100pxに移動しましたが、画面から上に移動して非表示にすることはありません。代わりに、下に移動してから（私が思うに）動作を開始します。

http://jsfiddle.net/laurelrose18/LLdjh/7/

#panel {

}

.menu {
    -webkit-border-bottom-left-radius:38px;
    -webkit-border-bottom-right-radius:38ßpx;
    border-bottom-left-radius:38px;
    border-bottom-right-radius:38px;
    background: $bluejeans;
    width: 100px;
    height:300px;
    padding-bottom: 25px;
}


.menu li {

    margin-bottom: .5em;
    list-style-type: none;

}



#menubtn {
    width: 100px;
    height: auto;
    max-width: 100px;
    margin-top: -100px;
}




.active {
padding-top: 100px;
}



<div class="container">
        <div class="row slidemenu"> 
            <div class="span2 offset10">

              <div id="panel">
              <ul class="menu flexbox"> 
                <li class="smIcon">sk</li>
                <li class="smIcon">pr</li>
                <li class="smIcon">tk</li>
                <li class="hitext">menu</li>
              </ul>
            </div>

            <div id="menulogo"> 
                <a class="slidebtn" href="#"><img src="images/monogram.png" alt="menu button" id="menubtn"></a> 
              </div>

            </div>
          </div>
        </div>

<script type="text/javascript" src="js/jquery-1.10.1.min.js"></script>


<script type="text/javascript">

$(document).ready(function(){

  $(".slidebtn").click(function(){
        $("#panel").toggleClass("active"); 
        $("#panel").slideToggle("slow");
        return false;
  });


});
</script>
4

1 に答える 1

0

$(this).position().top + 200の推奨される方法+=200pxに置き換えました.animate()。フィドル: http://jsfiddle.net/LLdjh/10/

#panelで始まるためtop: 0px、.animate()代わりに静的な値を使用できます。
フィドル: http://jsfiddle.net/LLdjh/11/
jQuery:

$(function () {
    var gomenu = "open"
    $(".slidebtn").click(function () {
        if (gomenu == "open") {
            $("#panel").stop().animate({
                top: "200px"
            }, 500);
            gomenu = "close";
        } else if (gomenu == "close") {
            $("#panel").stop().animate({
                top: "0px"
            }, 500);
            gomenu = "open";
        }
    });
});
于 2013-06-07T13:07:04.200 に答える