fadedIn（）后，HTML选取框无法正常工作

Question

我正在尝试使用html选框制作进度条。当用户点击提交时，fadeIn HTML选框和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，请参阅下面的代码片段演示方法！

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

＆＃13;

＆＃13;

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

})

＆＃13;

.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;
}

＆＃13;

<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"/>

＆＃13;

＆＃13;

＆＃13;