Verbesserte Lightbox-Animation mit jQuery

Question

Ich habe eine grundlegende Lightbox Popup in CSS erstellt und ich versuche, eine bessere Open/Close-Animation in JS zu implementieren, aber ich bin mir nicht sicher, wie. Ich habe mich umgeschaut, konnte aber nicht viel speziell dafür finden, sondern ganze JS-Lösungen. Ich benutze .fadeToggle, aber es ist nicht sehr glatt.

Hier ist mein 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

Das war eine Herausforderung für mich, weil ich nur jemals Leuchtkästen geschrieben, bevor in nativer JavaScript aktivieren, nie in jQuery.

Ich habe versucht, etwas mit den jquery Animationen .fadeIn(), .fadeOut() und .delay(), aber am Ende zu tun, wie Sie sehen, ging ich zu CSS transition: opacity und Javascript setTimeout() zurück.

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