jQuery удалить класс addClass анимировать

Попытка сделать очень-очень простую анимацию jQuery...

Элемент nav будет анимироваться с отрицательным полем, но класс .nav_btn2 не применяется, поэтому элемент nav не будет анимироваться обратно к исходному полю. Я занимался этим часами, на самом деле всю ночь... 7:47 утра, а я не спал, мля.

jQuery v1.7.1

<script type="text/javascript">
    $(document).ready(function() {
        $('.nav_btn').on('click',function() {
            $('nav').animate({marginLeft: '-445'}, 500);
            $('.nav_btn').removeClass('nav_btn').addClass('nav_btn2');
        });

        $('.nav_btn2').on('click',function() {
            $('nav').animate({marginLeft: '445'}, 500);
            $('.nav_btn2').removeClass('nav_btn2').addClass('nav_btn');
        });
    });
</script>

HTML

<nav>
   <img src="" alt="Detour Bar" id="logo" />

   <ul>
      <li><a href="#" class="nav_btn">BLOG</a></li>
      <li><a href="#" class="nav_btn">PHOTOS</a></li>
      <li><a href="#" class="nav_btn">CALANDER</a></li>
      <li><a href="info.php" class="nav_btn">INFO</a></li>
   </ul>

   <div id="menu_btn" class="nav_btn">
   </div>
</nav>

CSS

nav {
      height: 100%;
      width: 425px;
      padding: 20px 0px 0px 20px;
      background: rgb(255,255,255);
      background: rgba(255,255,255,.5);
      border-right: 7px solid #000;
      position: fixed;
      top: 0px;
      left: 0px;
}

nav ul {
      padding: 40px 0px 0px 0px;
      list-style: none;
}

nav li {
      padding: 0px 55px 0px 0px;
      text-align: right;
}

nav a {
      font-size: 4em;
      color: #000;
}

#menu_btn {
      width: 40px;
      height: 161px;
      border: 10px solid #000;
      border-top: 15px solid #000;
      border-bottom: 20px solid #000;
      border-top-right-radius: 10px;
      border-bottom-right-radius: 10px;
      background: rgb(0,0,0);
      background-image: url(img/menu.png);
      background-repeat: no-repeat;
      position: absolute;
      top: 40px;
      right: -60px;
}

Jquery v1.7.1 работает... Спасибо @micha

    <script type="text/javascript">
    $(document).ready(function() {
        $(document).on('click','.nav_btn',function() {
        $('nav').animate({marginLeft: '-445'}, 500);
        $('.nav_btn').removeClass('nav_btn').addClass('nav_btn2');
        });

        $(document).on('click','.nav_btn2',function() {
        $('nav').animate({marginLeft: '0'}, 500);
        $('.nav_btn2').removeClass('nav_btn2').addClass('nav_btn');
        });
    });
</script>

Любой совет будет принят с благодарностью!!!


jquery jquery-animate addclass removeclass
person Terry    schedule 16.01.2012    source источник
comment
Разместите HTML-код, сопровождающий этот код, пожалуйста.   -  person Anthony Grist    schedule 16.01.2012
comment
Я создал этот jsFiddle, используя опубликованные вами Javascript, HTML и CSS. Похоже, он перемещает навигацию за пределы экрана (чего я и ожидал) и изменяет классы ссылок (я проверил с помощью Firebug), но... что дальше? Там не на что нажимать (поскольку ссылки находятся за краем экрана), чтобы вернуть его.   -  person Anthony Grist    schedule 16.01.2012
comment
@AnthonyGrist, есть один div id=#menu_btn, который действует как вкладка, выступающая за край экрана, он также имеет класс .nav_btn. PS. Спасибо за всю помощь!   -  person Terry    schedule 16.01.2012

Ответы (2)


arrow_upward
1
arrow_downward

Вы неправильно используете функцию включения. Вы хотите, чтобы функция on была похожа на старую живую функцию, а не на старую функцию связывания.

Поэтому вам нужно сделать это следующим образом: $(document).on("click", selector, function() { ... }); Потому что документ всегда будет существовать, и документ всегда будет проверять, находится ли ваш селектор в документе, когда вы нажимаете на него.

Пример

person noob    schedule 16.01.2012

arrow_upward
0
arrow_downward

Я бы реорганизовал код, я думаю, это не очень хороший способ, я изменил код @Anthony Grist, чтобы вы могли заставить его работать с небольшой настройкой:

http://jsfiddle.net/pxFcw/

Можно добавить новый класс, не удаляя .nav_btn, или, если вы предпочитаете, вы можете использовать объект данных для хранения этой информации.

$('.nav_btn').on('click',function() {
         if(!$(this).hasClass("ishidden"))
         {
            $('nav').animate({marginLeft: '-245'}, 500);
             $(".nav_btn").addClass("ishidden");
         }
          else
          {
                $('nav').animate({marginLeft: '245'}, 500);
             $(".nav_btn").removeClass("ishidden");          
          }
        });

С объектом данных это будет выглядеть так: http://jsfiddle.net/dactivo/HjuFA/

  $('.nav_btn').on('click',function() {
         if(!$('.nav_btn').data("ishidden"))
         {
            $('nav').animate({marginLeft: '-245'}, 500);
             $('.nav_btn').data("ishidden",true);    
         }
          else
          {
                $('nav').animate({marginLeft: '245'}, 500);
                $('.nav_btn').data("ishidden",false);    
          }
        });

СТАРЫЙ ОТВЕТ 2

Хорошо, теперь я знаю, почему это не работает, вы удаляете класс «nav_btn», а затем назначаете класс «nav_btn2» несуществующему «объекту» (потому что вы удалили nav_btn).

Вы должны добавить класс nav_btn2, а затем удалить.

СТАРЫЙ ОТВЕТ 1: Только для версий Jquery ‹ 1.7, как прокомментировал @Anthony Grist.

Вы должны использовать живое событие, чтобы связать событие с кнопками, которые не существуют, когда вы устанавливаете событие: http://api.jquery.com/live/

$('.nav_btn').live("click", function(){
     ...
    });
  $('.nav_btn2').live("click", function(){
     ...
    });
person netadictos    schedule 16.01.2012
comment
live() устарел в 1.7, следует использовать on() (что они и есть) для jQuery 1.7+ или delegate() в противном случае. - person Anthony Grist; 16.01.2012
comment
@Anthony Grist: Спасибо, это правда, я добавлю примечание в начало своего ответа, я оставлю его на случай, если пользователь использует более старую версию. - person netadictos; 16.01.2012
comment
@AnthonyGrist, извините за поздний ответ. Заснул, печатая... Попробую вашу рекомендацию и доложу. - person Terry; 16.01.2012
comment
Пс. Я использую Jquery v›1.7, все хорошо. Собираюсь попробовать рекомендацию @netadictos с делегатом(). Может быть, это будет иметь значение. - person Terry; 16.01.2012
comment
@Terry: посмотри мою новую модификацию моего ответа, я думаю, это логично. - person netadictos; 16.01.2012