fadedIn()后,HTML选取框无法正常工作

时间:2017-12-16 08:15:01

标签: javascript jquery html css

我正在尝试使用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>

我该如何解决这个问题?

1 个答案:

答案 0 :(得分:3)

我认为由于display:none选框不起作用,而是选择设置opacity:0height: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;