javascript - 開閉時に特定の 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()裸の JS に固執する場合は CSS3 アニメーションを使用できます。後者の場合、不透明度をデフォルトで 0 に設定し、Javascript で 1 に変更します。これをスタイルシートに追加する必要があります:

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 2

jQueryを使用できます：

。フェードイン（）

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

。フェードアウト（）

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