Улучшение анимации лайтбоксов с помощью jQuery

Я создал базовое всплывающее окно с подсветкой в CSS, и я пытаюсь реализовать лучшую анимацию open/close в 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

@Rounin Извините, что-то быстрое и плавное, как открытая/закрытая анимация на вкладке «По умолчанию» здесь: http://noelboss.github.io/featherlight/. –

Это был вызов для меня, потому что я только когда-либо написанных лайтбоксы в родном JavaScript раньше, никогда в JQuery.

Я пытался сделать что-то с JQuery анимации .fadeIn(), .fadeOut() и .delay(), но в конце концов, как вы видите, я вернулся в CSS transition: opacity и яваскрипта 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

ответ

Смежные вопросы