javascript - 制作位置 :absolute div relative after toggleFade()

Question

我有一个元素，当用户单击切换器(复选框)时，我已经覆盖了两个图像并使用 toggleFade 函数使顶部图像淡出。它运行良好，只是为了让图像正常工作，底部图像设置为 position:absolute。当然，当发生 toggleFade() 时，绝对定位意味着所有较低的 div 都 float 。

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

有什么办法可以防止这种情况发生吗？我已经为较低的 div 尝试了 setTimeout，但这没有用。

这是我元素的 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;
  }

看这个 fiddle https://jsfiddle.net/oue2fnr0/9/