jQuery removeClass addClass animate - PullRequest
Новая
       21

jQuery removeClass addClass animate

0 голосов
/ 16 января 2012

Попытка сделать очень очень простую анимацию 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>

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

Ответы [ 2 ]

1 голос
/ 16 января 2012

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

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

Пример

0 голосов
/ 16 января 2012

Я бы реорганизовал код, я думаю, это не очень хороший способ, я изменил код @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, а затем удалить.

OLDER ANSWER 1: Только для версий Jquery <1.7, как прокомментировал @Anthony Grist. </strong>

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

$('.nav_btn').live("click", function(){
     ...
    });
  $('.nav_btn2').live("click", function(){
     ...
    });
...