Question

目标功能是通过单击小提琴（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

您可以通过切换“扩展”来轻松实现这一目标。类和使用CSS3来处理动画（和可见性）：

CSS：

.header-search-box {
   visibility: hidden;
   width: 0;
   transition: all 0.3s ease;
}

.expanded {
   visibility: visible;
   width: 100px;
}

JS：

$(function(){
   var mglass = $('.magnifying-glass');
   var form = $('.header-search-box');

   mglass.click(function(){
      form.toggleClass('expanded');
   });

});

在这里小提琴：http://jsfiddle.net/8rLmokp1/

Answer 2

$(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

jQuery如何展开和折叠表单域

2 个答案: