jQuery CSS 在其后面的命令之后执行

Question

我有一个容器和一个占容器宽度 100% 的内部 div。我希望容器立即展开，但将内部 div 保持在当前尺寸，然后使用 CSS 过渡逐渐展开。这是原文JS Fiddle no. 1 .

因为这似乎不起作用(为什么？)，即使应该立即应用 CSS，我尝试使用此 JS Fiddle no. 2 来延迟容器上的 addClass ，这也不起作用。

最后，在为前一个 fiddle 设置更长的延迟后，它的工作时间为 1000 毫秒，而不是 100 毫秒。所以.css()在1000ms后生效，但在100ms后不生效？!

谁能告诉我为什么 .css() 函数的行为就像异步工作一样？

Answer 1

要使 #1 工作，您需要此代码，将 .css() 从 setTimeout 中取出:

$('.inner').css({
  width: $('.inner').width() + 'px',
  height: $('.inner').height() + 'px'
});
setTimeout(function() {
  $('.container').addClass('big');
}, 1000);

您已将所有内容封装在 setTimeout 中，其中 1000 毫秒，而不是 $(function () {});。

fiddle :http://jsfiddle.net/m7k9mre8/