如何在两个类之间与.slideToggle()一起使用jQuery动画()

Question

使用此方法，我试图在更改div宽度时添加一些平滑性(动画)。

$("#changer").on("click",function(){
  $("#thediv").toggleClass("w-2 w-1");
});

CSS：

.w-1{height :200px witdh: 200px;}
.w-2{height :200px witdh: 300px;}

正如您所知道的，我可以切换类，但是更改大小的速度非常快，并且会导致一次跳过所有元素。现在，我需要使用一些efet，比如CSS3或jQyery动画来平稳地切换类。你能让我知道怎么做吗？

我已经试过了

$("#changer").on("click",function(){
  $("#thediv").toggleClass(1000, "col-md-2 col-md-1");
});

增加一些速度，但它没有工作

Answer 1

另外，确保您使用的是jquery，然后使用toggleClass的速度。记住，第一个param是类名，第二个param是速度，所以试试下面这个

$("#thediv").toggleClass("col-md-2 col-md-1", 1000); 

而不是这个-

$("#thediv").toggleClass(1000, "col-md-2 col-md-1");

阿克松看到了这个例子-- http://jsfiddle.net/yKFjA/1/

Answer 2

没有jQuery Ui效果，你就不能在开关上有速度--就像Jay说的那样，但是您可以这样做，->。

$("#changer").on("click",function(){
     $("#thediv").hide();
     $("#thediv").toggleClass("w-2 w-1");
     $('#thediv').fadeIn(1000);
});

希望这能有所帮助！