位置：toggleFade（）之后的絕對div相對值

Question

我有一個項目，當用戶單擊切換器（復選框）時，我已經覆蓋了兩個圖像，並使用toggleFade函數淡出了頂部圖像。 它可以正常工作，除了使圖像正常運行外，底部圖像設置為position：absolute。 當然，當toggleFade（）發生時，絕對定位意味着所有較低的div都向上浮動。

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

有什么辦法可以防止這種情況的發生？ 我已經嘗試了setTimeout為較低的div，但這沒有用。

這是我的項目的jsFiddle： https ://jsfiddle.net/jsieb81/oue2fnr0/

Answer 1

您可以在click事件上添加一個類，並通過轉換來管理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/