如何將CSS過渡添加到我的Jquery對話框？

Question

這是我用於打開和關閉對話框的腳本：

<script>
function open_dialog() {
    el = document.getElementById("dialog");
    el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}
</script>

這是我的對話框內容的html代碼：

<div id="dialog">
    <p>Dialog content</p>
</div>

這是我的CSS代碼：

#dialog {
    visibility: hidden;
    width: 560px;
    position: fixed;
    top: 30%;
    left: 50%;
    margin-left: -280px;
    height: 300px;
    z-index: 999;
}

因此，如何向對話框添加過渡？

Answer 1

使用這種opacity

#openDialog {
       opacity:0;
    -moz-box-shadow: 0 0 20px black;
-webkit-box-shadow: 0 0 20px black;
-o-box-shadow: 0 0 20px black;
box-shadow: 0 0 20px black;
-webkit-transition: opacity 0.5s ease-in-out;
-moz-transition: opacity 0.5s ease-in-out;
-o-transition: opacity 0.5s ease-in-out;
transition: opacity 0.5s ease-in-out;
 width: 560px;
position: fixed;
top: 30%;
left: 50%;
margin-left: -280px;
height: 300px;
z-index: 999;
}
  <span id="dialog">open</span>
    <div id="openDialog">
        <p id='dialog'>Dialog content</p>
    </div>

    jQuery('#dialog').click(function(){
    $('#openDialog').css('opacity','1');
    });

演示

Answer 2

我建議通過在元素上設置一個類來做到這一點，而不是使用JavaScript更改它的css屬性。

#dialog {
    /* visibility: hidden; Remove this */
    .......

    opacity: 0;
    -webkit-transition: 1000ms;
}

#dialog.show {
    opacity: 1;
}

不要忘記其余的transition屬性的瀏覽器前綴。 看到這個小提琴： http : //jsfiddle.net/0wg0mz80/