Improving lightbox animation with jQuery

Question

I've created a basic lightbox popup in CSS and I'm trying to implement a better open/close animation in JS, but I'm not sure how. I've looked around, but couldn't find much specifically for this, but rather entire JS solutions. I'm using .fadeToggle, but it's not very smooth.

Here's my markup:

<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:

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

Answer 1

This was a challenge for me, because I've only ever written lightboxes in native javascript before, never in jQuery.

I tried to do something with the jquery animations .fadeIn(), .fadeOut() and .delay(), but in the end, as you see, I went back to CSS transition: opacity and javascript setTimeout().

$(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>