制作位置:切换淡入淡出()后的绝对div相对

Question

我有一个项目，当用户单击切换器(复选框(时，我覆盖了两个图像，并使用 toggleFade 函数将顶部图像淡出。 它运行良好，除了要使图像正常运行，底部图像设置为位置：绝对。当然，当切换 Fade(( 发生时，绝对定位意味着所有较低的div 都会向上浮动。

    $(document).ready(function(){
    $('.lights').on('click', function (){
        $('.day').fadeToggle(3000);
        setTimeout(function() {$('.night').css('position: absolute');}, 3000);
    });
});

有什么办法可以防止这种情况发生吗？ 我已经尝试了较低div的设置超时，但这不起作用。

这是我项目的JSFiddle： https://jsfiddle.net/jsieb81/oue2fnr0/

Answer 1

您可以添加点击事件时类，并通过过渡在 css 中管理不透明度。喜欢这个：

(你不需要jQuery(

document.querySelector('.lights').addEventListener('click',function(){
  document.querySelector('.day').classList.add('hide');
});
.hide {
   opacity: 0;
   -webkit-transition: opacity 3s;
   transition: opacity 3s;
  }

看到这个小提琴 https://jsfiddle.net/oue2fnr0/9/