原生javasript实现搜索框淡入淡出显示隐藏的效果

搜索框淡入淡出显示隐藏效果演示

javascript部分代码

<!-- 搜索框显示隐藏部分 -->
<script>
	//获取元素
	var icon = document.getElementById("searchMe");
	var bar = document.getElementById("searchBar");
	var timer = null;
	var opacity = bar.style.opacity = 0;
	var i = 0;  //定时器关闭时间
	//某个元素的点击事件
	icon.onclick = function(){
		//显示与隐藏的判断
		if (bar.style.display=="none") {
			bar.style.display = "block";
			timer = setInterval(function(){
				opacity += 0.25;
				i += 0.25;
				//关闭定时器
				if (i>=1) {
					clearInterval(timer);
					i = 0;
				}		
				bar.style.opacity = opacity;			
			},400);
		}else{
			timer = setInterval(function(){
				opacity = opacity-0.25;
				i += 0.25;
				bar.style.opacity = opacity;
				if(i>=1||opacity==0){
					bar.style.display = "none";
					clearInterval(timer);
					i = 0;
				}
			},400);
		}
	};
</script>

CSS样式

<style>
	/*搜索图标*/
	.search-icon{
		width: 750px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		font-size:20px;
		cursor: pointer;
	}
	/*搜索框*/
	.search-bar{
		width: 400px;
		height: 60px;
		padding: 10px 0;
		overflow: hidden;
		position: relative;
	}
	.search-bar:after{
		content: "";
		position: absolute;
		top:-9px;
		right: 20px;
		border-width: 10px;
		border-style: solid;
		border-color: transparent transparent #33CC99 transparent;
	}
	.search-bar form{
		float: right;
	}
	.search-bar input[type=text]{
		outline: none;
		width: 280px;
		height: 40px;
		border:1px solid #33CC99;
		box-sizing: border-box;
		padding-right: 70px;
		padding-left: 12px;
	}
	.search-bar input[type=button]{
		outline: none;
		width: 70px;
		height: 40px;
		background-color: #33CC99;
		border: 0;
		color:white;
		position: absolute;
		top: 10px;
		right: 0;
		cursor: pointer;
	}
	</style>

HTML代码部分

<!-- 搜索图标 -->
<div class="search-icon">
	<i id="searchMe" class="fa fa-search" aria-hidden="true" title="click me"></i>
</div>	
<!-- 搜索框 -->
<div class="search-bar" id="searchBar" style="display: none;">
	<form action="">
		<input type="text">
		<input type="button" value="搜索">
	</form>
</div>

注意：使用了fontAwesome的图标，记得引入fontAwesome的css