用Jquery怎么控制div层的显示、消失？

要实现的功能：
页面加载时，不显示div层。点击button按钮后，如果div层没有显示，则显示出div层；如果div层已经显示，则隐藏div层。
就是问号处不知该怎么写~<html>
<head>
    <script>
        $(function() {
            $("butt").click(function() {
                ????
            });
        })
    </script>    <style>
       #interface {
           display:none;
           width:1000px;
           height:200px;
           background:red;
       }
    </style>
</head><body>
    <div id="interface"></div>    <button id="butt">点击</button>
</body>
</html>

解决方案 »

  1.   


    <html>
    <head>
      <script>
      $(function() {
      $("butt").click(function() {
           if($("#interface").css("display")=="none"){
              $("#interface").show();
          }
          else{
          $("#interface").css("display","none");
          }
      });
      })
      </script>  <style>
      #interface {
      display:none;
      width:1000px;
      height:200px;
      background:red;
      }
      </style>
    </head><body>
      <div id="interface"></div>  <button id="butt">点击</button>
    </body>
    </html>
      

  2.   


    $("butt").click(function() {
    if($("#interface").is(':visible')) {{
    $("#interface").fadeOut();
    }else{
    $("#interface").fadeIn();
    }
      

  3.   

    <html>
    <head>
        <title></title>
        <script type="text/javascript" src="../../Scripts/jquery-1.4.4.min.js"></script>
        <script type="text/javascript">
            $(function () {
                $("#butt").click(function () {
                    $("#interface").toggle();
                });
            })
        </script>
        <style type="text/css">
            #interface
            {
                display: none;
                width: 1000px;
                height: 200px;
                background: red;
            }
        </style>
    </head>
    <body>
        <div id="interface">
        </div>
        <button id="butt">
            点击</button>
    </body>
    </html>