類樣式

改變之前請參見下面的代碼片段：類樣式

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

我期望的風格要先應用，使得它10px的寬，然後添加類使它擴大到200px。但事實並非如此。如果你看着檢查器，你可以看到在style屬性之前改變了class屬性。爲什麼是這樣的，我該如何使它以正確的方式工作？

謝謝！

來源

2017-10-16 J. Doe

'如果你在檢查一下你可以看到類屬性的樣式之前被改變attribute'我看不到那麼快，他們在同一時間 –

'$（本）的CSS改變（'width'，'10px'）。promise（）。then（（）=> $（this）.addClass（'wide'））;' –

也許你的電腦比我的電腦快。我絕對可以看到差異。 –

嘗試等待一下，然後再添加該類，您將永遠無法看到兩者之間的差異，因此您的計算機速度太快。

最後，這是一個關於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>

來源

2017-10-16 03:31:07

當然可以。但爲什麼它不能正常工作？ –

瀏覽器需要將上下文切換回呈現UI的原因，因此您放入超時時間並不重要。這完全是因爲js是異步的，不能一次完成兩件事情，即渲染和更改變量。 –

0的超時是個不錯的主意。我知道它是異步的，但它總是首先改變類，這不奇怪嗎？ –

的原因，你的方法行不通是因爲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>

來源

2017-10-16 03:34:41 Vincent1989

即使它不使用回調，它仍然應該按順序執行？ –

是的，執行順序總是從上到下，從左到右，因爲代碼的執行速度如此之快，甚至更短，只要點擊它，屏幕上就不會出現任何差異。 – Vincent1989

JavaScript是異步的，它做2個工作在同一時間。你可以使用setTimeout來解決這個問題。 setTimeout

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

來源

2017-10-16 03:39:40 SonMinh

回答

相關問題