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/

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

1 个答案: