位置：toggleFade（）之后的绝对div相对值

Question

I've got a project where i've overlaid two imaged and have the top image fade out using a toggleFade function, when the user clicks a toggler (checkbox). it works well, except that to get the images to function correctly the bottom image is set to position:absolute. Of course, when the toggleFade() happens, the absolute positioning means all the lower divs float up.

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

is there any way to prevent this from happening? i've tried setTimeout for the lower div, but that didn't work.

here's the jsFiddle of my project: https://jsfiddle.net/jsieb81/oue2fnr0/

Answer 1

You can add a class on click event and manage opacity in css with a transition. Like this :

(You don't need jQuery)

document.querySelector('.lights').addEventListener('click',function(){
  document.querySelector('.day').classList.add('hide');
});

.hide {
   opacity: 0;
   -webkit-transition: opacity 3s;
   transition: opacity 3s;
  }

see this fiddle https://jsfiddle.net/oue2fnr0/9/