如何在两个类之间使用带有 .slideToggle() 的 jquery Animate()答案

【问题标题】：How to Use jquery Animate() with .slideToggle() Between Two Classes如何在两个类之间使用带有 .slideToggle() 的 jquery Animate()
【发布时间】：2014-05-26 05:06:20
【问题描述】：

我正在尝试通过使用此方法添加一些平滑度（动画）来更改 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");
});

增加一些速度，但它没有 woek

【问题讨论】：

添加过渡：高1s宽1s；到元素样式
如果没有 jQuery Ui 效果，您将无法在切换时获得速度 - stackoverflow.com/questions/17837236/jquery-toggleclass-speed
@vals，感谢您的回复我添加了添加过渡：高度 1s 宽度 1s；到 .w-1{height 1s width 1s;} 和 .w-2{height 1s width 1s;} 但没有任何改变

标签： jquery css animation jquery-animate

【解决方案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/

【讨论】：

【解决方案2】：

如果没有 jQuery Ui 效果，您将无法在切换时获得速度——正如 Jay 所说；但你可以这样做 ->

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

希望这会有所帮助！

【讨论】：