Переключение анимации jQuery не работает

Question

Пытается сделать простую анимацию при нажатии. У меня есть панель, которая скрыта с правой стороны (абсолютная позиция), когда пользователь нажимает на вкладку, я хочу, чтобы панель выдвигалась. Я могу получить начальный слайд, чтобы работать, но не могу получить тумблер, чтобы нормально функционировать

$('#sideTab').click(function() { 
      $('#sideCol').animate({'right':'0%'}) 
     }, function() 
      $('#sideCol').animate({'right':'-50%'})      
     }); 


$('#sideTab').toggle(function() { 
      $('#sideCol').animate({'right':'0%'}) 
     }, function() 
      $('#sideCol').animate({'right':'-50%'})      
     }); 

ни один из них работают

скрипку: http://jsfiddle.net/BQE32/1/

когда зеленый квадрат щелкнул синий квадрат должен переместить влево, а при повторном нажатии он должен вернуться к исходному позиционированию

Answer 1

click не принимает две функции обратного вызова, вы можете прочитать свойство right и установить правильное значение:

$('#sideTab').click(function() { 
    var $e = $('#sideCol'); 
    $e.animate({ 
     'right': $e.css('right') === '0px' ? '-50%' : '0px' 
    }); 
}); 

http://jsfiddle.net/Jrs36/

Вы также можете использовать CSS transition свойство и JQuery .toggleClass() метод:

CSS:

#sideCol { 
    -webkit-transition: right 400ms; 
    -moz-transition: right 400ms; 
    -o-transition: right 400ms; 
    transition: right 400ms; 
} 

#sideCol.right50 { 
    right: 50%; 
} 

JavaScript:

$('#sideTab').click(function() { 
    $('#sideCol').toggleClass('right50'); 
}); 

Answer 2

Вы можете использовать toggle() здесь:

$('#sideTab').toggle(function() { 
    $('#sideCol').animate({'right':'0%'}) 
}, function() { 
    $('#sideCol').animate({'right':'-50%'}) 
}); 

Demo

Answer 3

$('#sideTab').on('click', function() { 
    if ($(this).hasClass('toggled') === true) { 
     $(this).animate({'right': '-50%'}).removeClass('toggled'); 
    } else { 
     $(this).animate({'right': '0'}).addClass('toggled'); 
    } 
}); 

Это будет проверять, если боковая панель уже «переключены», и если это будет удалить класс и анимировать его обратно из (и наоборот).