クラスは、次のスニペットを参照してくださいスタイル

Question

前に変更されます：10pxの広いそれを作る、私はスタイルが最初に適用されることを期待する

$('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>

をし、クラスがそれを引き起こして追加します200ピクセルに拡大しますしかし、そうではありません。インスペクタを見ると、スタイル属性の前にクラス属性が変更されているのがわかります。なぜこれが、どのように私はそれが正しい方法で動作させることができますか？

ありがとうございます！

Answer 1

クラスを追加する前にちょっと待ってください。コンピュータの速度が速すぎる2つの時間の差は決してわかりません。

これは、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のは、同じ時間に2つの仕事を、非同期です。この問題を解決するには、setTimeoutを使用できます。あなたはインスペクタで見れば、あなたがクラス属性を見ることができます setTimeout

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