jquery实现可显示和关闭的搜索框特效

来源:https://www.sucaihuo.com/js/1828.html 2017-04-26 17:46浏览(659) 收藏

jquery实现可显示和关闭的搜索框特效是一款非常实用的功能,基本上任何网站也用得上,它不占用地方,只要用的时候才点击弹出来,虽然功能简单,但很实用,样式也很好看,
jquery实现可显示和关闭的搜索框特效
分类:表单代码 > 搜索框 难易:初级
查看演示 下载资源 下载积分: 20 积分

首先引用文件

<link href="css/global-base.css" rel="stylesheet" type="text/css">
<script src="script/jquery.min.js"></script>
<script type="text/javascript" src="script/vivo-common.js"></script>

核心代码,点击显示、隐藏、透明、显示隐藏时间、js

init : function(){
		var headBox=$("#vivo-head"),
		navBox=headBox.find(".vivo-nav"),
		searchBox=headBox.find(".vivo-search"),
		searchInput=searchBox.find("input"),
		searchBtn=navBox.find(".search-user a.search"),		
		closeSearchBtn=searchBox.find("a.close"),
		isSearchClose=true,
		isMenuEnter=isCommEnter=false;

		closeSearchBtn.css({opacity:0});
		searchBox.on({
			mouseenter : function(){
				closeSearchBtn.animate({opacity:1},300);
			},
			mouseleave : function(){
				closeSearchBtn.animate({opacity:0},300);
			}
		});

		searchBtn.on("click",function(){
			if(isSearchClose){
				searchBox.children().css({opacity:0});
				searchBox.css({display:"block",height:0}).stop().animate({height:80},300);
				searchBox.children().stop().delay(300).animate({opacity:1},500);
				searchInput.focus().val("");
				$(this).addClass("current");
				isSearchClose=false;
			}else{
				searchBox.stop().animate({height:0},300,function(){
					$(this).css({display:"none"});
					isSearchClose=true;
				});
				$(this).removeClass("current");
			}
			return false;
		});
		closeSearchBtn.on("click",function(){
			searchBtn.click();
			return false;
		});
评论0
头像

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2