jquery - 使用 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:

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

Answer 1

这对我来说是一个挑战，因为我以前只用原生 javascript 写过灯箱，从来没有用 jQuery。

我尝试用 jquery 动画 .fadeIn()、.fadeOut() 和 .delay() 做一些事情，但是在最后，如您所见，我回到了 CSS transition: opacity 和 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>