javascript - fadeIn() 后 HTML 选框不起作用

Question

我正在尝试使用 html 选框制作进度条。当用户点击提交时，fadeIn HTML marquee 和 fadeOut 与 ajax 成功。但是，当我单击提交按钮时，选取框将 fadeIn 并且不起作用。这是我的尝试:-

$(document).ready(function(){
	$('#signup-submit').click(function(){
		$('.bar').fadeIn();
	})

})

.bar{
  background:#a0a0a0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  display:none;
}
.progressing{
  width:50px;
  height:4px;
  background:orangered;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<marquee class="bar" scrollamount=50><div class="progressing"></div></marquee>
<input type="button" id="signup-submit" value="signup"/>

但是当没有任何 jquery 函数时它可以工作

.bar{
  background:#a0a0a0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}
.progress{
  width:50px;
  height:4px;
  background:red;
  display: block;
}

<marquee class="bar" scrollamount=50><div class="progress"></div> </marquee>

我该如何解决这个问题？

Answer 1

我认为是因为 display:none 字幕无法正常工作，而不是设置 opacity:0 和 height:0px ，请引用下面的代码片段演示该方法!

请使用相同的方法隐藏选取框元素。

$(document).ready(function(){
	$('#signup-submit').click(function(){
		$('.bar').addClass("hide");
	})

})

.bar{
  background:#a0a0a0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
  opacity:0;
  height:0px;
  transition:opacity 1s ease; 
  overflow:hidden;
}
.bar.hide{
  opacity:1;
  height:auto;
}
.progressing{
  width:50px;
  height:4px;
  background:orangered;
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<marquee class="bar" scrollamount=50><div class="progressing"></div></marquee>
<input type="button" id="signup-submit" value="signup"/>