從右側滑入輸入字段？

Question

目前我的輸入欄顯示從上到下。

我該如何改變它，使它從右側出現？

http://jsfiddle.net/hckrj218/

// Hide all the elements in the DOM that have a class of "box" 
 
jQuery('.box').hide(); 
 

 
jQuery('.clickme').each(function() { 
 
    jQuery(this).show(0).on('click', function(e) { 
 
     
 
     e.preventDefault(); 
 
     
 
     jQuery(this).next('.box').slideToggle('fast'); 
 
    }); 
 
});

/* line 84, sass/components/_form.scss */ 
 
.search { 
 
    position: relative; 
 
    float: right; 
 
    color: #EAEAEA; 
 
} 
 
/* line 89, sass/components/_form.scss */ 
 
.search input { 
 
    width: 250px; 
 
    text-indent: 5px; 
 
    line-height: 29px; 
 
    padding: 0; 
 
    border: 1px solid #EAEAEA; 
 
    font-family: "Open Sans", sans-serif; 
 
    padding: 12px 7px; 
 
    font-size: 14px; 
 
    font-weight: 900; 
 
} 
 
/* line 102, sass/components/_form.scss */ 
 
.search .fa-search { 
 
    position: absolute; 
 
    top: 3px; 
 
    left: auto; 
 
    right: 10px; 
 
} 
 

 
/* line 110, sass/components/_form.scss */ 
 
.box { 
 
    float: right; 
 
} 
 

 
/* line 114, sass/components/_form.scss */ 
 
.clickme { 
 
    float: right; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
 
<div class="search"> 
 

 
<a href="#" class="clickme"> 
 
           <img src="http://placehold.it/36x40" width="36" height="40" class="search-icon" /> 
 
          </a> 
 
          
 
          <div class="box"> 
 
           <form role="search" method="get" class="search-form" action="#"> 
 
            <label> 
 
             <input type="search" class="search-field" placeholder="Search …" value="" name="s" title="Search for:" /> 
 
            </label> 
 
           </form> 
 
          </div> 
 
    
 
</div>

Answer 1

包括jQuery UI的，改變它作爲jQuery(this).next('.box').toggle('slide', {direction: 'right'});

嘗試

jQuery('.box').hide(); 

jQuery('.clickme').each(function() { 
    jQuery(this).show(0).on('click', function(e) { 

     e.preventDefault(); 

     jQuery(this).next('.box').toggle('slide', {direction: 'right'}); 
    }); 
}); 

見http://jsfiddle.net/tamilcselvan/hckrj218/2/