jquery - 切换动画

Question

我有一个侧边栏，当您单击按钮时，侧边栏向左滑动250px，当您单击相同的按钮时，我希望它向后滑动250px - 我目前正在使用jquery {{ 1}}但由于我对jquery相当新，我需要问我做错了什么？

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

.toggle

我正在使用1.9.1（在删除.toggle之前）并且UI不是一个选项。

感谢。

Answer 1

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

3. 您可以将CSS transitions用于动画，而不是jQuery。

   $（函数（$）{     $（ 'a.mobile菜单图标'）。在（ '点击'，函数（）{         $（'＃侧边栏）toggleClass（ '激活'）。     }）; }）;

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

{@ 1}}事件已弃用，并且不再适用于该函数。通过向.toggle()添加data-open属性，可以非常轻松地创建此类函数。这是可以这样做的代码。唯一需要做的更改就是让<a>像这样：<a>

<a href="#" class="mobile-menu-icon" data-open="true">Click to toggle</a>

这是一个小提琴链接：http://jsfiddle.net/zfc3V/18/

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