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

刺骨的言语ヽ痛彻心扉 2021-11-22 07:00 271阅读 0赞

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

![在这里插入图片描述][2019072516203223.gif]

#### 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样式 ####

#### 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

[2019072516203223.gif]: /images/20211122/d88c4390bcba4376b06bb26555248878.png