jquery if/else按钮动画

Question

我有一些我写的jquery，上半部分对于动画效果很好。

可以在此处找到动画示例(向下滚动到About部分，然后单击'+'：http: damon9.com/dev/DC/index38.php

我尝试了if/else语句的多种组合，以确定其中一个元素是否可见，运行此函数，等等。我需要它来回切换。我是jquery的新手，但如果有任何帮助，我将不胜感激。谢谢。

html:
<div class="info-box" id="about-box">
  <div class="info-control"> 
    <!-- end .info-control --></div>
  <div class="button-area">
    <div class="open-close-btn" id="oc_about">
      <h2>+</h2>
      <h3>_</h3>
    </div>
    <!-- end #open-close-btn -->
    <p id="open-about">Open</p>
    <p id="close-about">Close</p>
  </div>
  <!-- end .button-area -->
  <header>Damon</header>
  <p class="info-title">Who I am and what I do</p>
  <p class="info-title">oijawoijriaejriejwirjw wr aweo  aw oewi jwo ijew oiweaj iwe </p>
</div>
<!-- end .info-box --> 

css:
.info-box {
background-color: #000;
width: 410px;
height: 100px;
opacity: .75;
position: absolute;
z-index: 60;
overflow: hidden;
}

.info-box header {font-family: 'GeosansLightRegular';
font-size: 42px;
color: #82da9b;
font-weight: 100;
letter-spacing: 1px;
padding: 6px 10px 0px 12px;
margin: 0;

}
.button-area {float: right; width: 180px; height: 50px;  position: relative; padding:     10px 10px 0 0;}

.button-area p {float: right; font-size: 13px; color: white; font-family: 'GeosansLightRegular';letter-spacing: 1px; padding: 4px 0 0 0; margin: 0;}

.open-close-btn {background-image:url(../images/open-close.png); position: relative; width: 53px; height: 53px; z-index: 70; float: right; display: block; cursor: pointer;  }

.open-close-btn:hover {background-position:0 -53px; cursor: pointer;}

.open-close-btn:active {background-postion:0 -106px; cursor: pointer;}

#oc_about h2{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 100; font-size: 40px; color: white; text-shadow: 3px 3px 2px #000 inset; margin: -2px 0 0 2px; display: block;}

#oc_about h3{font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-weight: 100; font-size: 30px; color: white; text-shadow: 3px 3px 2px #000 inset; margin: -6px 0 0 4px; position: absolute; display: none;}

.button-area #open-about{display: block;}

.button-area #close-about{display: none;}

js:
if ($('.button-area #open-about').is(':visible')) {// if ID exists

    $("#oc_about").click(function () {
    $("#oc_about h2").fadeOut("fast" , function () {
    $(".button-area #open-about").fadeOut("fast" , function () {
    $("#oc_about h3").fadeIn("fast" , function () {
    $(".button-area #close-about").fadeIn("fast" , function () {
    $("#about-box").animate({height:"2000px" , paddingTop: "500px", marginTop: "-500px"}, 500);
                    });
                });
            });
        });
    });

    }

    else {
     $("#oc_about").click(function () {
$("#oc_about h3").fadeOut("fast" , function () {
$(".button-area #close-about").fadeOut("fast" , function () {
$("#oc_about h2").fadeIn("fast" , function () {
$(".button-area #open-about").fadeIn("fast" , function () {
$("#about-box").animate({height:"100px" , paddingTop: "-500px", marginTop: "500px"}, 500);
                    });
                });
            });
        });
    });

     }

Answer 1

顺序是错误的。if/else应在内部单击：

$("#oc_about").click(function () {
    if ($('.button-area #open-about').is(':visible')) {
        $("#oc_about h2").fadeOut("fast" , function () {
            $(".button-area #open-about").fadeOut("fast" , function () {
                $("#oc_about h3").fadeIn("fast" , function () {
                    $(".button-area #close-about").fadeIn("fast" , function () {
                        $("#about-box").animate({height:"2000px" , paddingTop: "500px", marginTop: "-500px"}, 500);
                    });
                });
            });
        });
    } else {
        $("#oc_about h3").fadeOut("fast" , function () {
            $(".button-area #close-about").fadeOut("fast" , function () {
                $("#oc_about h2").fadeIn("fast" , function () {
                    $(".button-area #open-about").fadeIn("fast" , function () { 
                        $("#about-box").animate({height:"100px" , paddingTop: "-500px", marginTop: "500px"}, 500); 
                    });
                });
            });
        });
    }
});