jQuery特效实战开发 - 实例：点击下拉显示搜索框
2015/05/22 09:29:19
|
作者：HTML5学堂（码匠）
|
分类：jQuery实战开发
|
关键词：JQ特效,animate,动画,JQ,jQuery
JQ特效—点击下拉显示搜索框
HTML5学堂：对于jQuery的学习，我们并不建议一个方法一个方法去记忆。或者说，记忆方法虽然是必要的，但是更重要的是应用。所谓条条大路通罗马，有时候同一个功能，可以用十几种方法来实现。因此，学习jQuery，应用才是王道。
效果需求
在单击o时，黑色块会出现，此时如果再单击o，则能够收回，如果将鼠标移入到黑色区域，关闭按钮会逐渐出现，点击关闭按钮，也可以让黑色区域收回。
效果展示
效果实现
结构代码
-
<body>
-
<div class="search">
-
<form action="">
-
<input type="text" name="" id="" value="HTML5开发工程师">
-
<input type="button" name="" id="" value="搜索">
-
<span>X</span>
-
</form>
-
</div>
-
<div class="btn">
-
<span>O</span>
-
</div>
-
<div class="inf">
-
<h1>JQ实现的下拉搜索框特效，细节处理很重要</h1>
-
<p>HTML5-博看文思-主讲人：<a href="http://blog.163.com/hongshaoguoguo@126">独行冰海</a> <a href="http://m18050905128.blog.163.com/">梦幻雪冰</a></p>
-
</div>
-
</body>
欢迎沟通交流~HTML5学堂
样式代码
-
<style>
-
.search {
-
height: 0;
-
background: #333;
-
overflow: hidden;
-
}
-
.search form {
-
width: 740px;
-
padding: 20px 0;
-
margin: 0 auto;
-
}
-
.search input {
-
float: left;
-
height: 40px;
-
border: 0;
-
}
-
.search input[type='text'] {
-
width: 570px;
-
padding: 0 0 0 10px;
-
}
-
.search input[type='button'] {
-
width: 120px;
-
font-size: 14px;
-
color: #FFF;
-
background: rgb(0, 140, 214);
-
}
-
.search span {
-
float: left;
-
display: none;
-
width: 24px;
-
height: 24px;
-
margin: 8px 0 0 10px;
-
text-align: center;
-
background: rgba(255, 255, 255, 0.3);
-
line-height: 24px;
-
border-radius: 12px;
-
cursor: pointer;
-
}
-
.search span:hover {
-
background: rgba(255, 255, 255, 0.6);
-
}
-
.btn {
-
width: 80%;
-
height: 50px;
-
padding: 0 10%;
-
background: #CCC;
-
}
-
.btn span {
-
float: right;
-
width: 40px;
-
height: 40px;
-
margin: 4px 0;
-
border: 1px solid #999;
-
background: #FFF;
-
line-height: 40px;
-
text-align: center;
-
border-radius: 50%;
-
cursor: pointer;
-
}
-
-
.inf h1 {
-
font-size: 24px;
-
line-height: 48px;
-
}
-
.inf p {
-
font-size: 16px;
-
line-height: 36px;
-
}
-
.inf {
-
width: 850px;
-
margin: 20px auto;
-
}
-
</style>
行为代码
-
<script>
-
var change = false;
-
$('.btn span').click(function(){
-
if (change) {
-
$('.search').stop().animate({
-
"height" : 0
-
}, 400);
-
change = false;
-
} else {
-
$('.search').stop().animate({
-
"height" : "90px"
-
}, 400);
-
change = true;
-
}
-
});
-
$('.search').hover(function(){
-
$('.search span').stop().fadeIn();
-
}, function(){
-
$('.search span').stop().fadeOut();
-
})
-
$('.search span').click(function(){
-
$('.search').animate({
-
"height" : 0
-
}, 400);
-
change = false;
-
})
-
</script>
注意事项
为了防止animate()、fadeIn()、fadeOut()等动画效果因多次执行而造成动画效果冲突、混乱，所以在执行新一轮的动画之前，需要对之前未执行完成的动画效果进行处理。先使用stop()进行处理，再执行新的动画效果。
欢迎沟通交流~HTML5学堂
阅读：523
极客编程技术分享
