Question

请参阅以下代码段：

$('div').click(function(){
  $(this).css('width', '10px').addClass('wide');
});

div {width: 100px; height: 100px; background-color: green;}
div.wide {width: 200px !important; transition: width 2s;}

<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

我希望首先应用样式，使其宽10px，然后添加类，使其扩展到200px。然而事实并非如此。如果查看检查器，可以在style属性之前看到要更改的class属性。为什么这样，我怎样才能使它以正确的方式运作？

谢谢！

Answer 1

在添加课程之前尝试稍等一下，你永远不会看到两台计算机之间的时间差异太快。

最后，这是一个更多关于javascript异步方式的问题，并且不会在每个命令之间呈现DOM。在那里放置超时告诉javascript它现在可以做其他事情并将上下文切换到渲染。

$('div').click(function(){
  $(this).css('width', '10px');
  var smallBox = this;
  setTimeout(function(){
      $(smallBox).addClass('wide');
  }, 0);
});

div {width: 100px; height: 100px; background-color: green;}
div.wide {width: 200px !important; transition: width 2s;}

<div></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

Answer 2

您的方法不起作用的原因是因为jQuery .css()方法不允许回调函数，这意味着.css()和.addClass()将同时触发。你可以做的是尝试使用.animate()方法。

示例

$( "div" ).click(function() { $(this).animate({ width: 10 }, function() { $(this).addClass('wide'); }); });

div {width: 100px; height: 100px; background-color: green;} div.wide {width: 200px !important; transition: width 2s;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div></div>

Answer 3

JavaScript是异步的，它可以同时执行两个作业。您可以使用setTimeout来解决此问题：

$('div').click(function(){
   $(this).css('width', '10px');
  setTimeout(function(){ 
  $(this).addClass('wide');
 }, 3000);});

在样式之前更改类

3 个答案: