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缩小，尽管整个元素应该是相同的宽度。

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

编辑：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'});
});

有人可以帮助我创建以下动画

1 个答案: