toggleClass easing only works on ease out

Question

I have created a search-bar that eases in and out of hidden and visible using fixed widths. I'm using jQuery UI to toggle the widths with easing, however, I'm having issues with getting the widths to ease in properly. Rather than easing in, it stays invisible until the last minute and then appears. Easing out works as it should. Fiddle here:

http://jsfiddle.net/mLqhqcyb/

This issue is happening across all browsers.

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

$( document ).ready( function(){

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

Answer 1

You are using class hidden which is also a class in bootstrap and its getting styles from it too.

Rename the class and it will work.

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

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

Fiddle