如何平滑此搜索栏动画

我试图修改从这里获得的代码以满足我的使用需求：

CSS：

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

HTML:

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

JS:

$(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'});
        }
    });
});

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

JSFiddle

谢谢你，

试试这样的东西，FIDDLE

$(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");
    });
});

设置动画时间另请参阅更新的fiddle

  $(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
            }
        });
    });

引用动画（）

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

解释：

jQuery在显示之前不知道隐藏div的维度。因此，当它被点击时，它实际上会把它拉离位置进行测量，然后迅速更换。这通常会产生一些跳跃的副作用。设置元素的宽度可以防止jQuery将其拉出位置。

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

jQuery幻灯片向下不平滑

有人帮了我一把。我想要的功能在这里：http://jsfiddle.net/mw7yK/12/

CSS：

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

HTML:

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

JS:

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

相关内容

最新更新

热门标签：