如何在两个类之间使用带有.slideToggle（）的jquery Animate（）

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

如你所知，我可以切换类，但是更改大小的速度非常快，并且会导致像跳过所有元素一样。现在我需要使用一些像CSS3或jQyery动画这样的efets来顺利切换类。你能告诉我怎么做吗？

我已经尝试过了：

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

增加一些速度，但它并没有结束

Answer 1

此外，请确保您使用的是jquery UI，然后使用toggleClass加速。 记住第一个参数是类名，第二个参数是速度，所以试试这个

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

而不是 -

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

Aksom看到这个例子 - http://jsfiddle.net/yKFjA/1/

Answer 2

  

如果没有jQuery Ui效果，你就无法在切换时获得速度 - 正如杰伊所说;   但你可以这样做 - ＆gt;

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

希望这有帮助！