fadedIn（）后，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"/>