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>