切换类的jquery（反向）速度（jsfiddle ex）

Question

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

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

我的问题：

我如何在我的代码中实现一些会使第二次点击的内容也变得更慢而不是那么突然？

Here is the fiddle.

bool TransferService::send(char recAddr,char dataLength, char *data){
PT_BEGIN();
  timer.reset();
  timer.start();
  do {
    pc.putc(startByte);
    pc.putc(recAddr);
    pc.putc(controllerAddress);
    pc.putc(dataLength);
    for (int i = 0; i < dataLength; i++) {
      pc.putc(data[i]);
    }
    pc.putc(getCrc(recAddr,controllerAddress,data, dataLength));
    _messageReceived = false;
    PT_WAIT_UNTIL(!timer.read_ms() <=10 || ACK);
  } while(timer.read_ms() <=10);
  PT_END();
}

Answer 1

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

Jquery .animate（） http://api.jquery.com/animate/

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