Question

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

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

谢谢，

Answer 1

尝试这样的事情，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");
    });
});

Answer 2

设置动画时间也会看到updated 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
            }
        });
    });

参考 animation()

Answer 3

您只需要为每个可扩展div添加宽度。

解释：

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

更详细的信息请看这个链接：

jQuery slideDown is not smooth

Answer 4

有人帮助了我。我想要的功能在这里：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);
    });
});

如何平滑此搜索栏动画

4 个答案: