javascript / jQuery - 在toggleClass完成后获取div宽度[重复]

Question

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

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

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

.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;
}

<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>

Answer 1

使用您的过渡 CSS 速度值更改延迟。

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

.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;
}

<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>