javascript / jQuery - 在toggleClass完成后得到一个div宽度

Question

我有一个按钮可以在某处切换CSS类。这个css类改变了一些div的宽度。

所以，我试图在切换完成后获得特定div 的宽度。
我在下面写了一个演示来测试，请运行代码剪切并谢谢。

＆＃13;

＆＃13;

$( "button" ).click(function() {
  $('.thisDiv').toggleClass('setwidth');
  alert($(".thisDiv").width());
});

＆＃13;

.wrapper {
  width: 500px;
  height: 300px;
  background-color: #000;
}
.thisDiv {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #fff;
  transition: 0.3s all linear;
}
.setwidth {
  width: 200px;
}

＆＃13;

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

<button class="button">tickle me</button>
<div class="wrapper">

<div class="thisDiv">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

使用转换css速度值更改延迟。

＆＃13;

＆＃13;

$( "button" ).click(function() {
  $('.thisDiv').toggleClass('setwidth').delay(400).queue(function(){
   alert($(".thisDiv").width());
   $(this).dequeue();
  });
});

＆＃13;

.wrapper {
  width: 500px;
  height: 300px;
  background-color: #000;
}
.thisDiv {
  width: 100px;
  height: 100px;
  margin: 0 auto;
  background-color: #fff;
  transition: 0.3s all linear;
}
.setwidth {
  width: 200px;
}

＆＃13;

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

<button class="button">tickle me</button>
<div class="wrapper">

<div class="thisDiv">
</div>
</div>

＆＃13;

＆＃13;

＆＃13;