使用jQuery改进灯箱动画

我在CSS中创建了一个基本的灯箱弹出窗口，我试图在JS中实现更好的开启/关闭动画，但我不知道如何。我环顾四周，但找不到特别的东西，而是整个JS解决方案。我使用的是.fadeToggle，但不是很流畅。使用jQuery改进灯箱动画

这里是我的标记：

<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'); 
});

来源

2016-12-17 Mario Parra

“_I'm努力实现JS更好的打开/关闭动画，但我不知道how_” - 你能更明确？您具体指什么意思是“更好”？ – Rounin

@Rinin对不起，像“默认”灯箱上的打开/关闭动画一样快捷，顺畅：http://noelboss.github.io/featherlight/。 –

这对我来说是一个挑战，因为我只写过灯箱在本地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>

来源

2016-12-17 20:26:30 Rounin

使用jQuery改进灯箱动画

回答

相关问题