toggleClass缓动只适用于缓和

Question

我创建了一个搜索栏，可以使用固定宽度轻松进出隐藏和可见。我正在使用jQuery UI来通过缓动切换宽度，但是，我遇到了使宽度正常放松的问题。它不是放松，而是在最后一分钟之前保持不可见，然后出现。放松工作应该如此。小提琴：

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

你正在使用类hidden，它也是bootstrap中的一个类，也是它的样式。

重命名该类，它将起作用。

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

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

Fiddle