javascript - 有人可以帮我制作以下动画吗

Question

基本上，想要这样的东西

TEXT_____________________[img]


'TEXT' is actual label for example `<div>LABEL</div>`

'_____________' is a `hr` element

'[img]' is a small image, for example a magnifying glass

所需的动画是当用户点击 [img] 时，搜索输入框会变慢出现在图像左侧，例如点击后：

TEXT________ [search-box] [img]

[img] 应该在同一个位置向右浮动，唯一的变化是hr虽然整个元素应该是相同的宽度，但它会缩小。

我有一些原型，但它有点笨拙和丑陋，有人可以提出一个好的解决方案吗？

编辑：http: //jsfiddle.net/BTFEd/2/

是的，就像那个小提琴一样，但是图像图标停留在最右边，而 hr 只是根据搜索框的可见性缩小或扩大。

Answer 1

使用animate，但隐藏hr之前：

$("#s-box").hide();
$("#search-icon").click( function(){
    $("#s-box").animate({ width: 'toggle'});
    $(".my-hr").animate({ width: 'toggle'});
});