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 切换的解决方案，但是：

关闭的时候，css classes需要反序关闭，所以先淡出再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>

jquery 切换动画/倒序

jquery toggle animations / in reverse order

html

javascript

css

jquery

jquery-animate

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