频道选择顶部搜索

@@ -4,15 +4,13 @@
  * @date: 2015/10/28
  */
 var $ = require('jquery');
-
 var $searchBox = $('.search-box'),
     $indexSearch = $('.index-search'),
     $indexLogo = $('.index-logo');
 
-$searchBox.find('input').on('focus', function () {
+$searchBox.find('input').on('focus', function() {
     $indexLogo.css({
-        width: 0,
-        display: 'none'
+        width: 0
     });
     $searchBox.css({
         width: '12.8rem'
@@ -21,10 +19,9 @@ $searchBox.find('input').on('focus', function () {
         width: '15.5rem'
     });
     $('.clear-text, .no-search').show();
-}).on('blur', function () {
+}).on('blur', function() {
     $indexLogo.css({
-        width: '5.4rem',
-        display: 'block'
+        width: '5.4rem'
     });
     $searchBox.css({
         width: '8.8rem'
@@ -34,11 +31,10 @@ $searchBox.find('input').on('focus', function () {
     });
     $('.clear-text, .no-search').hide();
 });
-
-$searchBox.find('.clear-text').click(function () {
+$searchBox.find('.clear-text').click(function() {
     $searchBox.find('input').val('').trigger('focus');
 });
-
-$searchBox.find('.search-icon').click(function () {
+$searchBox.find('.search-icon').click(function() {
     $indexSearch.submit();
-});
\ No newline at end of file
+});
+

@@ -13,11 +13,18 @@
             font-size: 50rem / $pxConvertRem;
             width: 216rem / $pxConvertRem;
             color: #343434;
+            overflow: hidden;
+            transition: width 400ms;
         }
 
         .index-search {
-            float: right;
+            position: absolute;
+            top: 0;
+            right: 0;
             width: 384rem / $pxConvertRem;
+            height: 112rem / $pxConvertRem;
+            overflow: hidden;
+            transition: width 400ms;
             .search-box {
                 float: left;
                 position: relative;