0

I have a button that toggles a CSS class somewhere. This css class changes a width of some divs.

So, I'm trying to get the width of a particular div after the toggle is finished.
I wrote a demo below to test, Please run the code snipped and thank you.

$( "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>
Nippledisaster
  • 278
  • 2
  • 18

1 Answers1

1

Change delay with your transition css speed value.

$( "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>
Alain1303
  • 71
  • 6