Javascript不遵循分步說明

Question

這是我的HTML

 $(function(){ $(".button1").on("click",function(){ $(".img").css("display","block"); $(".bord").append('<div class="test1">11111111</div>'); $(".img").css("display","none"); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="parent"> <div class="button1">button1</div> <div class="button2">button2</div> </div> <div class="bord"> <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;"> </div> 

在這里，我編寫代碼，當button1單擊show image，然后顯示文本，然后隱藏image。 但是這里的圖片沒有顯示

然后我更改代碼，以便顯示圖像並顯示文本，並且它正在工作

  $(function(){ $(".button1").on("click",function(){ $(".img").css("display","block"); $(".bord").append('<div class="test1">11111111</div>'); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="parent"> <div class="button1">button1</div> <div class="button2">button2</div> </div> <div class="bord"> <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;"> </div> 

那么我的第一個代碼是什么問題呢？

我需要show image->show text-->hide image

請檢查 。

Answer 1

為了顯示.img ，瀏覽器需要進行重排和重畫過程，並且只有在callstack為空（您的代碼未運行）時才有可能。 這意味着您放置以下內容：

$(".img").css("display","block");

.img尚未在屏幕上呈現，因為調用堆棧仍很忙，因此瀏覽器不執行任何操作，並等待您的代碼完成執行。 然后你把這段代碼

$(".img").css("display","none");

然后返回到先前的狀態。 代碼完成執行后，根本不會進行重排或重繪過程。 而且您在屏幕上看不到您的按鈕。

Answer 2

您正在將display的值更新為quicky。 如果添加超時，您將看到圖像實際上正在顯示，然后隱藏。

更改不會直接呈現（請參閱@Maximus的答案）

添加一個超時，它將根據需要工作

 $(function() { $(".button1").on("click", function() { $(".img").css("display", "block"); $(".bord").append('<div class="test1">11111111</div>'); setTimeout( function() { $(".img").css("display", "none"); }, 2000); }); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="parent"> <div class="button1">button1</div> <div class="button2">button2</div> </div> <div class="bord"> <img src="http://www.mtlexs.com/images/reload.gif" class="img" style="display: none;"> </div>