jQuery реверс анимации по второму клику

Question

У меня есть элемент div, который при событии щелчка вставляет ссылку. Это прекрасно работает, за исключением того, что я сейчас пытаюсь получить его, чтобы при повторном нажатии на ссылку анимация возвращалась в исходное состояние.

Я пытался добавить класс к ссылке, но когда анимация запускается, она завершает выполнение той же анимации, но в обратном направлении.

    $('a.contact').click(function() {
        $('#contact').animate({marginLeft:'500px'}, {queue:false, duration:'7000'});
        $('#contact').animate({width:'500px'}, {duration:'7000'});
        $('a.contact').css()
        $('a.contact').animate({marginLeft:'-500px'}, '250');
        $('a.contact')addClass('open');
    return false;
});

Answer 1

Самый простой способ справиться с этим - использовать переключатель jQuery. Это позволяет активировать две функции поочередным щелчком.

$('a.contact').toggle(
function(){
    // odd clicks
},
function(){
    // even clicks
});

... И быстрый jsFiddle для демонстрации .

Обратите внимание, что здесь используется обработчик события переключения jQuery , а не эффект анимации с тем же именем.

Примечание # 2: согласно документации, toggle () был удален в jQuery 1.9. (То есть сигнатура метода, которая позволяла передавать несколько функций, которые были активированы при альтернативных щелчках.)

Answer 2

Прежде всего, вам не хватает а.в строке addClass.Это правильная версия: $ ('a.contact'). AddClass ('open');

В любом случае, я бы сделал так:

// Bind the click event with the live function

$('a.contact:not(.open)').live('click', function() {
    // Animate box as wanted and add a class to indicate that the box is open.
    // ... Code to animate goes here ...
    $(this).addClass('open');
});

$('a.open').live('click', function() {
    // Reverse animation and remove class
    // ... Code to reverse animation goes here ...
    $(this).removeClass('open');
});

Причина, по которой вам нужнопривязка к живой функции заключается в том, что класс «open» не добавляется ни к каким элементам, когда имеет место обычная привязка .click ().

Читайте о живом методе здесь: http://api.jquery.com/live/

Answer 3

$('a.contact').click(function(e) {
   e.stopPropagation();
   var dir = '';

   if ($(this).hasclass('to-left'))
   {
      dir = 'to-rigth';
      $(this).removeClass('to-left');
   } 
   else //ini or has class to rigth
   {
      dir = 'to-left';
      $(this).removeClass('to-rigth');
   }

   dir = $(this).addclass(dir);

   if (dir=='to-left')
   {
      //you code to left
   }
   else 
   {
      //you code to rigth
   }

    return false;
});