JQuery - переключение анимации

Question

У меня есть боковая панель, которая при нажатии на кнопку на боковой панели слайдов слева 250px, при нажатии на ту же кнопку, я хочу, чтобы скользить назад 250px - Я в настоящее время использую JQuery .toggle но, как я довольно новый для jquery Мне нужно спросить, что я делаю неправильно?

http://jsfiddle.net/zfc3V/13/

(function($){ 
    $('a.mobile-menu-icon').toggle(
    function(){ 
     $('#sidebar').animate({left: '250px'}, 700); 
    }, 
    function(){ 
     $('#sidebar').animate({left: '0px'}, 700); 
    }); 
}); 

Я использую 1.9.1 (до .toggle был удален) и UI это не вариант.

Спасибо.

Answer 1

но событие «кликнуть», а не переключать. Может быть с этим:

$('a.mobile-menu-icon').click(function(event){ 
var trigger = $(this); 
if(trigger.hasClass("expanded")){ 
    trigger.removeClass("expanded"); 
    $('#sidebar').animate({left: '250px'}, 700); 
} else { 
    trigger.addClass("expanded"); 
    $('#sidebar').animate({left: '0px'}, 700); 
} 
}); 

Answer 2

.toggle() событие было устаревшим, и не работает в этой функции больше. Добавив свойство data-open к вашему <a>, очень легко создать такую ​​функцию. Вот код, который сделает это. Единственное изменение, которое требуется, это делает ваш <a> так: <a href="#" class="mobile-menu-icon" data-open="true">Click to toggle</a>

$('a.mobile-menu-icon').click(function() { 
    var x = $(this).data('open'); 
    $('#sidebar').animate({left: (x) ? '250px' : '0px'}, 700); 
    x ? $(this).data('open', false) : $(this).data('open', true); 
}); 

Вот скрипку ссылка: http://jsfiddle.net/zfc3V/18/

Answer 3

1. Стенография для document.ready является $(function(){ }); не function()
2. Если вы хотите, чтобы что-то произошло при нажатии, вы должны добавить click event handler.

3. Вы можете использовать CSS transitions для анимации вместо jQuery.

   $ (функция ($) {$ ('a.mobile-меню-значок'). На ('нажмите', функция() { $ ('# боковой панели'). ToggleClass ('активный') }); });

http://jsfiddle.net/zfc3V/19/

Answer 4

Используйте CSS вместо
JS:

$('a.mobile-menu-icon').on("click", function() { 
    $('#sidebar').toggleClass('show'); 
}); 

Css:

#sidebar { 
    left: 0; 
    -webkit-transition: all .7s ease; 
    -moz-transition: all .7s ease; 
    -ms-transition: all .7s ease; 
    -o-transition: all .7s ease; 
    transition: all .7s ease; 
} 

#sidebar.show { 
    left: 250px; 
}