我已经在 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');
});
最佳答案
这对我来说是一个挑战,因为我以前只用原生 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>
关于jquery - 使用 jQuery 改进灯箱动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41202074/