Javascript 如何平滑此搜索栏动画

我试图修改从中获取的代码以满足我的使用需求：

CSS:

HTML:

它按预期工作，但动画不平滑。如何使动画流畅

谢谢，

试试这样

简化版

$(document).ready(function () {
    $('.trigger').click(function () {
        $('.search-bar').fadeToggle("slow");
    });
});

---

设置动画时间也请参见

---

参考

您只需将宽度添加到每个可扩展div

解释：

jQuery在显示隐藏的div之前不知道它的维度。所以，当它被点击时，实际上会将其拉出位置，在快速更换之前进行测量。这通常会产生副作用，引起一些神经质。在元素上设置宽度可以防止jQuery将其拉出位置

更多详细信息请参见此链接：

---

有人帮了我的忙。我想要的功能是：

CSS:

HTML:

---

从你想要它慢慢放松的意义上说是平滑的，这并不是通常的动画效果。你们可以淡入淡出，这是你们想要的帽子吗？不，我不想淡入淡出。我在网上看到了很多。我希望我的网站有类似的东西。

<div class="search-bar">
    <input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''">           
</div>
<button class="trigger">search</button>

$(document).ready(function() {
    $('.trigger').click(function() {
        if ($("search-bar").is(':visible')) {
            $('.search-bar').animate({width: 'toggle'}).css({ 'display' : 'inline'});
        } else {
            $('.search-bar').animate({ width: 'toggle' }).css({ 'display' : 'inline'});
        }
    });
});

$(document).ready(function () {
    $('.trigger').click(function () {
        if ($(".search-bar").is(':visible')) {
            $('.search-bar').fadeOut();
        } else {
            $('.search-bar').fadeIn();
        }
    });
});

$(document).ready(function () {
    $('.trigger').click(function () {
        $('.search-bar').fadeToggle("slow");
    });
});

  $(document).ready(function() {
        $('.trigger').click(function() {
            if ($("search-bar").is(':visible')) {
                $('.search-bar').animate({width: 'toggle'},500);//here set animation duration
            } else {
                $('.search-bar').animate({ width: 'toggle' },500);//here set animation duration
            }
        });
    });

.search-bar { display: inline; }
.searchbox { width: 200px; display: none; }
.trigger { display: inline}

<div class="search-bar">
    <input type="text" name="s" class="searchbox" value="Search" onfocus="this.value=''" />           
</div>
<button class="trigger">search</button>

$(document).ready(function() {
    $('.trigger').click(function() {
        $('.searchbox').animate({width: 'toggle'}, 1000);
    });
});