addClass 发生后如何添加内容

Question

I have div and button. when i click button this div adds class and its width become 150px; I want that when this div become 150px show something in console.log. but this console dont be shown until div becomes 150px; can someone help me please? can u show me code example? here is code what i have now:

html:

<div class="test"></div>
<button class="button">BUTTON</button>

Js:

$('.button').click(function(){
$( ".test" ).addClass( "addTest" );
})

CSS:

.test{
width:0px;
}
.addTest{
   width:150px;
}

Answer 1

There are two possibilities:

Exactly what you asked for, can be achieved by just adding the console.log() command after you call the addClass:

$(".button").click(function(){
    $( ".test" ).addClass( "addTest" );
    console.log("Test!");
})

But I assume you want to react on the size of the element, without regarding what changed the size? In this case, you need to introduce some additional framework. Have a look here: How to detect DIV's dimension changed?

According to your update in the comments. I'd go like this:

$(".button").click(function(){
    $( ".test" ).addClass( "addTest" );
    if($( ".test" ).css("margin-left")=="180px"){
        console.log("Test!");
    }
})