Увядание конкретного CSS/JS всплывающего окна при открытии/закрытии

Question

В следующем фрагменте кода показано, как я создал всплывающие окна с CSS и JS. Есть ли шанс, чтобы он исчезал при открытии/закрытии его, не меняя способ работы, я имею в виду просто выскакивать окно, изменяя его стиль отображения?

function lightbox_open(){ 
    window.scrollTo(100,500); 
    document.getElementById('light').style.display='block'; 
    document.getElementById('fade').style.display='block'; 
} 

function lightbox_close(){ 
    document.getElementById('light').style.display='none'; 
    document.getElementById('fade').style.display='none'; 
} 

Answer 1

Вы можете использовать JQuery:

.fadeIn()

function lightbox_open(){ 
    window.scrollTo(100,500); 
    $('#light,#fade').fadeIn(); 
} 

.fadeOut()

function lightbox_close(){ 
     $('#light,#fade').fadeOut(); 
} 

Answer 2

Вы можете использовать либо использовать JQuery, чтобы сделать замирания $().fadeIn() или использовать CSS3 анимации, если вы хотите придерживаться голых JS. В последнем случае установите непрозрачность 0 по умолчанию и измените ее на 1 через Javascript. Вы должны добавить это к вашей таблице стилей:

selector { 
    opacity: 0; 

    -webkit-transition: opacity 1s ease-in-out; 
    -moz-transition: opacity 1s ease-in-out; 
    -ms-transition: opacity 1s ease-in-out; 
    -o-transition: opacity 1s ease-in-out; 
    transition: opacity 1s ease-in-out; 
} 

Answer 3

Вы можете использовать JQuery fadein() на открытой и fadeout() на близких, но если вы хотите сделать это с чистым JavaScript, я рекомендую прочитать эту source code. они сделали это чудесно.