jquery - 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

1. document.ready 的简写是$(function(){ }); 不是function()
2. 如果你想在点击时发生一些事情，你必须添加一个click event handler.

3. 您可以使用CSS transitions动画 而不是jQuery.

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

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

Answer 2

但事件是“点击”，而不是切换。也许有了这个：

$('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 3

使用 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;
}

Answer 4

该.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/