HTML5学堂-码匠 HTML5学堂

您当前位于:jQuery 实战开发 ——> jQuery特效实战开发 - 实例:点击下拉显示搜索框

jQuery特效实战开发 - 实例:点击下拉显示搜索框

2015/05/22 09:29:19 | 作者:HTML5学堂(码匠) | 分类:jQuery 实战开发 | 关键词:JQ特效,animate,动画,JQ,jQuery

JQ特效—点击下拉显示搜索框

HTML5学堂:对于jQuery的学习,我们并不建议一个方法一个方法去记忆。或者说,记忆方法虽然是必要的,但是更重要的是应用。所谓条条大路通罗马,有时候同一个功能,可以用十几种方法来实现。因此,学习jQuery,应用才是王道。

效果需求

在单击o时,黑色块会出现,此时如果再单击o,则能够收回,如果将鼠标移入到黑色区域,关闭按钮会逐渐出现,点击关闭按钮,也可以让黑色区域收回。

效果展示

HTML5学堂 点击下拉显示搜索框

效果实现

结构代码

  1. <body>
  2. <div class="search">
  3.         <form action="">
  4.             <input type="text" name="" id="" value="HTML5开发工程师">
  5.             <input type="button" name="" id="" value="搜索">
  6.             <span>X</span>
  7.         </form>
  8. </div>
  9. <div class="btn">
  10.     <span>O</span>
  11. </div>
  12. <div class="inf">
  13.     <h1>JQ实现的下拉搜索框特效,细节处理很重要</h1>
  14.     <p>HTML5-博看文思-主讲人:<a href="http://blog.163.com/hongshaoguoguo@126">独行冰海</a> <a href="http://m18050905128.blog.163.com/">梦幻雪冰</a></p>
  15. </div>
  16. </body>

欢迎沟通交流~HTML5学堂

样式代码

  1. <style>
  2. .search {
  3.     height: 0;
  4.     background: #333;
  5.     overflow: hidden;
  6. }
  7. .search form {
  8.     width: 740px;
  9.     padding: 20px 0;
  10.     margin: 0 auto;
  11. }
  12. .search input {
  13.     float: left;
  14.     height: 40px;
  15.     border: 0;
  16. }
  17. .search input[type='text'] {
  18.     width: 570px;
  19.     padding: 0 0 0 10px;
  20. }
  21. .search input[type='button'] {
  22.     width: 120px;
  23.     font-size: 14px;
  24.     color: #FFF;
  25.     background: rgb(0, 140, 214);
  26. }
  27. .search span {
  28.     float: left;
  29.     display: none;
  30.     width: 24px;
  31.     height: 24px;
  32.     margin: 8px 0 0 10px;
  33.     text-align: center;
  34.     background: rgba(255, 255, 255, 0.3);
  35.     line-height: 24px;
  36.     border-radius: 12px;
  37.     cursor: pointer;
  38. }
  39. .search span:hover {
  40.     background: rgba(255, 255, 255, 0.6);
  41. }
  42. .btn {
  43.     width: 80%;
  44.     height: 50px;
  45.     padding: 0 10%;
  46.     background: #CCC;
  47. }
  48. .btn span {
  49.     float: right;
  50.     width: 40px;
  51.     height: 40px;
  52.     margin: 4px 0;
  53.     border: 1px solid #999;
  54.     background: #FFF;
  55.     line-height: 40px;
  56.     text-align: center;
  57.     border-radius: 50%;
  58.     cursor: pointer;
  59. }
  60.  
  61. .inf h1 {
  62.     font-size: 24px;
  63.     line-height: 48px;
  64. }
  65. .inf p {
  66.     font-size: 16px;
  67.     line-height: 36px;
  68. }
  69. .inf {
  70.     width: 850px;
  71.     margin: 20px auto;
  72. }
  73. </style>

行为代码

  1. <script>
  2.         var change = false;
  3.         $('.btn span').click(function(){
  4.             if (change) {            
  5.                 $('.search').stop().animate({
  6.                     "height" : 0
  7.                 }, 400);
  8.                 change = false;
  9.             } else {
  10.                 $('.search').stop().animate({
  11.                     "height" : "90px"
  12.                 }, 400);
  13.                 change = true;                
  14.             }
  15.         });
  16.         $('.search').hover(function(){
  17.             $('.search span').stop().fadeIn();
  18.         }, function(){
  19.             $('.search span').stop().fadeOut();
  20.         })
  21.         $('.search span').click(function(){
  22.             $('.search').animate({
  23.                 "height" : 0
  24.             }, 400);
  25.             change = false;
  26.         })
  27.     </script>

注意事项

为了防止animate()、fadeIn()、fadeOut()等动画效果因多次执行而造成动画效果冲突、混乱,所以在执行新一轮的动画之前,需要对之前未执行完成的动画效果进行处理。先使用stop()进行处理,再执行新的动画效果。

欢迎沟通交流~HTML5学堂

微信公众号,HTML5学堂,码匠,原创文章,WEB前端,技术分享

HTML5学堂

原创前端技术分享

HTML5学堂,HTML5,WEB,前端,视频课程,技术视频,学习视频,面试,JS

原创视频课程

用心打造精品课程

微信小程序,决胜前端,面试题,面试题集合,前端,HTML5,真题

小程序-决胜前端

前端面试题宝库

原创书籍,学习书籍,书籍推荐,HTML5布局之路,HTML5,WEB前端

HTML5布局之路

非传统模式讲解前端