jquery切换动画/反向顺序

Question

我想要这样的事情：
一个按钮触发脚本，然后完成后，相同的按钮将反向（切换）脚本

（我现在正在学习javascript / jquery，所以我是一个完整的初学者）

示例：

    <script>
            $(document).ready(function(){

                $("button").click(function(){
                    $("div").animate( 
                            {height: '250px'}, 
                            function(){ $("#hidden_txt").fadeIn(1000); } );
                });

            });
        </script>

<button>Start</button>

<div style="background:#98bf21; height:100px; width:100px; position:absolute;">
    <span id="hidden_txt" style="display: none">Hey, just checking !</span>
</div>

我找到了css类切换的解决方案，但是：

• 当它关闭时，css类需要以相反的顺序关闭，因此首先淡出然后div返回到100px高度
  
• 在IE9和IE8中，css过渡不起作用：/

（jquery 1.12.4）

Answer 1

使用以下JS：

<script>

    var clicked=0;
    $(document).ready(function(){

        $("button").click(function(){
            if(clicked==0){

            $("div").animate(
                {height: '250px'},
                function(){ $("#hidden_txt").fadeIn(1000, function(){
                    clicked=1;

                }); } );

            }else if(clicked==1){

                $("#hidden_txt").fadeOut(1000, function(){

                    $("div").animate(
                        {height: '100px'},
                        function()
                        {
                            clicked=0;
                        });

                });

            } 
        });

    });
</script>