動畫切換幻燈片從右到左輸入搜索

Question

我在這裏做了一些事情，我只是想讓輸入幻燈片從右到左。

http://jsfiddle.net/5Gq7L/5/

我用簡單的代碼來顯示和隱藏輸入字段，

$("#edit-search-block-form--2").animate({width:'toggle'},500); 

任何幫助。 感謝

Answer 1

我瞭解你的問題是將文字輸入從右向左滑動。

jQuery沒有提供從左側或右側滑動一個元素，所以你可以通過jQuery提供的動畫方法來實現。

這是我實現這個方式：

$("#showhide").toggle(function() { 
$("#search2").animate({'margin': '-=100px'}, 500); 
     $(this).toggleClass("closed"); 
}, function() { 
$("#search2").animate({'margin': '+=100px'}, 500); 
     $(this).toggleClass("closed"); 
}); 

您可以點擊這裏提琴：

http://jsfiddle.net/5Gq7L/11/

Answer 2

我放在你的輸入字段在一個div和設置鏈接和包裝DIV兩者的浮到左：

<div id="input_wrapper"> 
    <input type="text" id="search2" name="search_block_form" value="" size="30" maxlength="128" > 
</div> 

，迫使格自左向右走。

這裏是更新的小提琴： http://jsfiddle.net/robertp/5Gq7L/10/