Меню jQuery ведет себя странно

при щелчке 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>

jquery slidetoggle jquery-animate toggleclass
person user2011473    schedule 07.06.2013    source источник
comment
Я обновил это, и оно вроде работает, но оно слишком сильно и дважды смещается. Есть идеи, где я ошибся? Я просто хочу, чтобы он поднялся на 200 пикселей, а затем вниз на 200 пикселей. jsfiddle.net/laurelrose18/LLdjh/3   -  person user2011473    schedule 07.06.2013

Ответы (1)


arrow_upward
0
arrow_downward

Я заменил $(this).position().top + 200 предпочтительным методом +=200px для .animate(). Скрипт: http://jsfiddle.net/LLdjh/10/

Поскольку #panel начинается с top: 0px, вы можете вместо этого использовать статические значения для .animate().
Fiddle: 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";
        }
    });
});
person Mooseman    schedule 07.06.2013