切换类的 jquery(反向)速度(jsfiddle ex)

Question

我有一个关于 jquery 的切换速度的快速问题，我无法在这种特殊情况下实现:

• 我有两列。一开始隐藏了一个红色的；另一个(蓝色)占据了整个宽度。
• 单击按钮:我的代码使第一个缩小到三分之二，以便为宽度为三分之一的第二个腾出空间。
• 如您所见，第二个(红色)列显示为平滑过渡(1000 毫秒)。但第二次点击是突然返回到初始状态。

我的问题:

我如何在我的代码中实现一些东西，使第二次点击也变得更慢而不是突然？

Here is the fiddle.

$(document).ready(function() {
    $('#side').hide()
}),
$("#btn").click(function() {
    $('#main').toggleClass('two-thirds');
    $("#side").toggle(1000);
});

Answer 1

您可以使用 .animate() 或 CSS3 Transitions，具体取决于您的客户群。

Jquery.动画() http://api.jquery.com/animate/

CSS3 过渡: http://www.w3schools.com/css/css3_transitions.asp