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()。

＆＃13;

$(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);
        });
    });
});

＆＃13;

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

＆＃13;

使用jQuery改进灯箱动画

1 个答案: