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

您可以使用布尔值来尝试它，如果布尔值为true，请尝试以其他方式移动它。那么你的代码应该是这样的：

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

这基本上会检查是否包裹＆＃39;单击按钮后右移。如果没有，它会向右移动，否则，它会向左移动。

Answer 3

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

CSS：

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

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

如何切换div的动画？

3 个答案: