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

，

1. ，document.ready的简写是$(function(){ })；function()
2. If，你想要在点击的时候发生一些事情，你必须添加一个click event handler.
3. You，可以使用CSS transitions代替jQuery来播放动画。

$(function($){ $(‘a.mobile-menu-icon’).on(‘点击’，function(){ $(‘#侧边栏’).toggleClass(‘active’)；})；});

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

Answer 3

.toggle()事件已弃用，并且在该函数中不再起作用。通过向<a>添加data-open属性，可以非常容易地创建这样的函数。下面是这样做的代码。唯一需要更改的是使您的<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/