javascript - 在同一个按钮上单击，Div fadeOut 和 fadeIn

Question

我想创建一个单页网站，点击该按钮，impressum-div 将淡入。再次单击同一按钮，impressum-div 将淡出。

我已经设法让它在点击时淡入 div。但是当我尝试使用“如果”时，整个事情就不再起作用了。我已经在这里找到了一些技巧并尝试了所有但对我来说没有任何效果..

这是我的脚本代码:

<script type="text/javascript">
     $(document).ready(function() {
         function display() {

             if (document.getElementById("impressum").style=="none") {
                 $('#impressum').fadeIn();
             }
             if (document.getElementById("impressum").style=="block") {
                 $('#impressum').fadeOut();
             }
         }
     });
</script>

我尝试了几个版本(使用 .click() 等等)，所以这可能是完全错误的。

这是我的 HTML 代码:

<input type="button" id="iButton" value="Impressum" onclick="javascript:display()"/> 

       <div id="impressum" style="display:none">

       <p>Here Impressum</p></div>

非常感谢您的帮助，如果您能发布一个完整的函数那将是最好的，因为我只是将各个部分疯狂地放在一起..

问候

Answer 1

只需使用 fadeToggle()

<input type="button" id="iButton" value="Impressum" onclick="javascript:display()" />
<div id="impressum" style="display:none">
    <p>Here Impressum</p>
</div>

然后

$(document).ready(function () {
    $('#iButton').click(function () {
        $('#impressum').stop(true).fadeToggle();
    })
});

演示:Fiddle