jQueryを使ってライトボックスアニメーションを改善する

Question

CSSで基本的なライトボックスポップアップを作成しましたが、JSでより良いオープン/クローズアニメーションを実装しようとしていますが、わかりません。私は周りを見回してきましたが、これだけではなく、JSソリューション全体のために特に特定できませんでした。私は.fadeToggleを使用していますが、それほど滑らかではありません。

はここに私のマークアップです：

<div class="popup-overlay"></div> 
<div class="popup"> 
    <span class="close-button"> 
    <div class="menu-bar menu-bar-top"></div> 
    <div class="menu-bar menu-bar-bottom"></div> 
    </span> 
    <div> 
    <h2>Heading</h2> 
    <div> 
     <p>Content</p> 
    </div> 
    </div> 
</div> 

jQueryの：私は今まで決してjQueryのでは、前ネイティブJavaScriptでライトボックスを書いたので、

$('.popup .close-button, .popup-overlay').on('click', function() { 
    $('.popup').fadeToggle('fast'); 
    $('.popup-overlay').fadeToggle('fast'); 
}); 

Answer 1

これは、私にとって挑戦でした。ご覧のよう

は、私は、jqueryのアニメーション.fadeIn()、.fadeOut()と.delay()で何かをしようとしたが、最終的に、私は戻ってCSSとJavaScript transition: opacitysetTimeout()へ行ってきました。

$(document).ready(function(){ 
 

 
    $('button').click(function(){ 
 
     $('body').append('<div></div>'); 
 
     $('div').addClass('lightbox'); 
 

 
     var lightbox = $('.lightbox'); 
 

 
     lightbox.css({ 
 
      'position':'absolute', 
 
      'top':'0', 
 
      'left':'0', 
 
      'width':'100%', 
 
      'height':'100%', 
 
      'background-color':'rgb(0,0,0)', 
 
      'opacity':'0', 
 
      'transition':'opacity 1s ease-out', 
 
     }); 
 

 
     lightbox.hover(function(){ 
 
      $(this).css('opacity','0.8'); 
 
     }); 
 

 
     lightbox.click(function(){ 
 
      $(this).css('opacity','0'); 
 
      setTimeout(function(){lightbox.remove();}, 1000); 
 
     }); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<button>Lightbox!</button>