Jquery UI + toggleClass无法正常工作

Question

今天我的toggleClass函数遇到了一些问题（通过jQuery UI）。 当我尝试我的切换按钮时，它打开我的盒子完美无瑕。 如果它在第二次点击后隐藏，则动画不再起作用。

首先点击 - 动画正常运作 第二次单击 - 动画不起作用，只是隐藏块静态

那么有人可以告诉我我做错了吗？

示例html + js：

<div id="wrapper">
    <div id="bar">
        <div id="box">
            <img src="images/logo.jpg" />
            <div id="open">
                <div id="slideBox">
                    &nbsp;
                </div>
                &#x25BC <a id="toggle" href="#">meer informatie </a> &#x25BC
            </div>
        </div> 
        <div id="nav">
            <ul>
                <li>
                    <a href="#home">Home</a>
                    <a href="#collectie">Collectie</a>
                    <a href="#zakelijk">Zakelijk</a>
                    <a href="#contact">Contact</a>
                    <a href="#inloggen">Inloggen</a>
                </li>
            </ul>
        </div>
    </div>
</div>

<script type="text/javascript">
    $( document ).ready(function() {
        $( "#toggle" ).on('click', function() {
            $('#slideBox').toggleClass("big-box", 800, "easeInOutBack" );

        });
    });
</script>