toggleClass easing 仅适用于缓出答案

【问题标题】：toggleClass easing only works on ease outtoggleClass easing 仅适用于缓出
【发布时间】：2015-04-30 03:14:14
【问题描述】：

我创建了一个搜索栏，可以使用固定宽度轻松进出隐藏和可见。我正在使用 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" );
    });
}

【问题讨论】：

标签： javascript css jquery-ui user-interface easing

【解决方案1】：

您正在使用hidden 类，它也是引导程序中的一个类，它也可以从中获取样式。

重命名类，它会起作用。

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

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

Fiddle

【讨论】：