javascript - 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 class toggle 的解决方案，但是:

• 当它关闭时，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>