我想在2014年的菜单中复制搜索表单。我尝试用jQuery隐藏和显示搜索按钮。我的问题是，按钮没有从左向右和从右向左滑动，它只是“出现”和“消失”。如果有人能看看，那就太好了！这是我的HTML代码
<div class="search">
<form class="form-inline" id="forminline"role="form">
<div class="input-group">
<span class="input-group-btn" id="btn-search">
<div class="btn btn-search"><i class="fa fa-search search-ico"></i></div>
</span>
<label class="sr-only" for="exampleInputEmail2"><?php _ex( \'Search for:\', \'label\', \'categories\', \'lagnogruppen\' ); ?></label>
<input style="display: none;" type="search" class="form-control form-search" id="box-search" placeholder="<?php echo esc_attr_x( \'Sök på hemsidan …\', \'placeholder\', \'lagnogruppen\' ); ?>" value="<?php echo esc_attr( get_search_query() ); ?>" name="s">
</div><!-- /input-group -->
</form>
</div>
这是我的简单jQuery代码
jQuery(document).ready( function(){
jQuery(\'#btn-search\').click( function(event){
event.stopPropagation();
jQuery(\'#box-search\').toggle();
});
jQuery(\'#box-search\').click(function(event){
event.stopPropagation();
});
jQuery(document).click( function(){
jQuery(\'#box-search\').hide();
});
}）；
最合适的回答,由SO网友:deflime 整理而成
.animate() 是您要查看的jQuery函数。非常方便。
下面是您特定问题的一个工作示例：
http://jsfiddle.net/B8Yv9/
以及完整的html工作：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type=\'text/javascript\' src=\'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js\'></script>
<style>
.search { width:300px; }
.input-group { position:relative; float:right; }
#btn-search { cursor:pointer; position:absolute; padding:3px 8px; }
input { width:0; padding-left:20px; border:1px solid transparent; }
</style>
</head>
<body>
<div class="search">
<form class="form-inline" id="forminline"role="form">
<div class="input-group">
<span class="input-group-btn" id="btn-search">
<div class="btn btn-search"><i class="fa fa-search search-ico">S</i></div>
</span>
<label class="sr-only" for="exampleInputEmail2"><?php _ex( \'Search for:\', \'label\', \'categories\', \'lagnogruppen\' ); ?></label>
<input type="search" class="form-control form-search unhovered" id="box-search" placeholder="Search" name="s" />
</div>
</form>
</div>
<script>
$(\'#btn-search\').click(function(){
$(\'input\').css(\'border-color\', \'#aaa\').animate({
\'width\' : 200
}, 300).focus().queue(function(){
$(this).addClass(\'toggled\');
$(this).dequeue();
});
});
$(\'input\').hover(
function() {
$(this).removeClass(\'unhovered\');
}, function() {
$(this).addClass(\'unhovered\');
}
);
$(document).click(function(){
if($(\'input\').hasClass(\'toggled\') && $(\'input\').hasClass(\'unhovered\')) {
$(\'input\').animate({
\'width\' : 0
}, 300).css(\'border-color\', \'transparent\').queue(function(){
$(this).removeClass(\'toggled\');
$(this).dequeue();
});;
}
});
</script>
</body>
</html>
