toggleClass 缓动仅适用于缓出

Question

我创建了一个搜索栏，可以使用固定宽度轻松进入和退出隐藏和可见。我正在使用 jQuery UI 通过缓动来切换宽度，但是，我在正确缓动宽度方面遇到了问题。它没有缓和，而是直到最后一分钟才隐身，然后出现。缓和工作正常。 Fiddle 这里：

http://jsfiddle.net/mLqhqcyb/

所有浏览器都会出现此问题。

var container = $('.left-container');
var button = $('.search-button');

$( document ).ready( function(){

    button.click( function(){
        console.log( 'Hello' );
        container.toggleClass( "hidden", 300, "easeInOutExpo" );
    });
}

Answer 1

您正在使用 class hidden 这也是 bootstrap 中的 class 并且它也从中获取样式。

重命名 class，它将起作用。

.custom-hidden {
    width: 0px;
    overflow: hidden;
}

button.click(function () {
        console.log('Hello');
        container.toggleClass("custom-hidden", 300, "easeInOutExpo");
}

Fiddle