如何切换div的动画？

Question

我尝试安装Jquery UI，以便可以轻松地将动画添加到toggleClass ，但是它仅在添加类时进行动画处理，而在删除类时不进行动画处理（或移回其原始位置）。

jQuery('#menu').click(function() {
  jQuery('#wrap').toggleClass('move-right', 1000);
  });

CSS

#wrap {
   position: relative;
   bottom: 22px;
   max-width: 1150px;
   margin: 0 auto;
   padding: 20px;
}

.move-right {
   left: 9%;
}

那么，如何使这两种方法同时进行动画处理？

只是向右滑动，然后向左滑动的简单滑动。 我以为jQuery UI最简单，但是如果我不需要它，那就更好了

Answer 1

将左位置添加到#wrap

然后将.move-right选择器更改为更具体

#wrap {
   position: relative;
   bottom: 22px;
   max-width: 1150px;
   margin: 0 auto;
   padding: 20px;
   left:0;
}

#wrap.move-right {
   left: 9%;
}

http://jsfiddle.net/TrcLy/

Answer 2

您可以通过使用布尔值来尝试使用它，如果布尔值是正确的，则尝试以其他方式移动它。 然后您的代码应该是这样的：

JS：

var right = false;
jQuery('#menu').click(function() {
  if(!right) {
    jQuery('#wrap').toggleClass('move-right', 1000);
    right = true;
  } else if(right) {
    jQuery('#wrap').toggleClass('move-left', 1000);
    right = false;
  }
});

CSS：

#wrap {
   position: relative;
   bottom: 22px;
   max-width: 1150px;
   margin: 0 auto;
   padding: 20px;
}

.move-right {
   left: 9%;
}

.move-left {
   right: 9%;
}

基本上，这将检查“包装”在单击按钮时是否已正确移动。 如果不是，它将向右移动，否则，将向左移动。

Answer 3

您可以使用CSS3过渡来定义过渡属性（左）和时间（1s），请参见： http : //jsfiddle.net/m3sEn/1/这不需要jQuery UI。

CSS：

#wrap {
    left: 0;
    transition: left 1s;
}

#wrap.move-right {
    left: 9%;
}