javascript - jQuery 如何展开和折叠表单字段

Question

目标功能是通过单击 fiddle (http://jsfiddle.net/phamousphil/4jw42kza/) 中显示的图像来展开和折叠表单域。目前我已经使用 .animate() 扩展了工作，但是经过多次摆弄后我找不到崩溃的方法。

我的问题有两个: 1. 如何实现点击图片时相反的动画收起表单？ 2.(奖励)我如何使用 .animate() 来利用 CSS visibility 在折叠时完全隐藏表单？我尝试实现这个失败了。

代码如下:

HTML:

<input class='header-search-box' type='text' id='search-string' name='search-string'>

 <img src='    http://findicons.com/files/icons/974/glyphish/18/magnifying_glass.png' class='magnifying-glass' />

CSS:

.header-search-box {

}

.header-search-box {
    width: 0px;
}

.magnifying-glass {

}

JavaScript:

$(function(){
  var mglass = $('.magnifying-glass');
  var form = $('.header-search-box');
  mglass.click(function(){
    form.animate({'width': '100px'}, 'slow');
    });
});

Answer 1

$(function () {
    var mglass = $('.magnifying-glass');
    var form = $('.header-search-box');
    mglass.click(function () {
        if (form.is(':hidden')) form.show()
        form.animate({
            'width': form.width() == 100 ? '0px' : '100px'
        }, 'slow', function () {
            if (form.width() == 0) form.hide()
        });
    });
});

jsFiddle example