javascript - JS 淡入和引导 |发出自动计算剩余 % 边距

Question

首先，查看那里并单击开关(传入/立即):https://ilovesubiaco.com.au/events-search/

如您所见，我的开关正常工作，但在我的“Right Now”事件中，我的 Tiles 相互堆叠。

原因是我的每个主要 div (col-lg-3 col-sm-4 col-xs-12 masonery_item event-now-tile) 的 elements.style 没有计算左边应该是正确的，可能是因为加载 html 时我的图 block 没有显示。

我进行了一些测试，试图删除第一个“fadeOut(0)”，看看我是否可以调整它。在这种情况下，我的图 block 每个元素都有正确的 % 剩余，但问题是我的图 block 在显示无后仍然占用空白。

我也尝试用 JS ".load"重新加载我的 div，但它看起来不太好，所以我可能不知道如何正确使用它。

我如何强制 BootStrap 库重新计算我的 div Left:%;第一次切换时的空间？

这是我的 JS:

jQuery(document).ready(function(){
            $(".event-now-tile").fadeOut(0);
    $('#event-inc-now-switch').on('switchChange.bootstrapSwitch', function (e, data) {
         var state=$(this).bootstrapSwitch('state');//returns true or false
         if(state){
            $(".event-now-tile").fadeOut(500);
            $(".event-inc-tile").fadeIn(500);
         }else{
            $(".event-inc-tile").fadeOut(500);
            $(".event-now-tile").fadeIn(500);
         }
     });
});

谢谢!!

Answer 1

解决方案非常简单，替换我的图 block 的位置

.event-now-tile{
    position:relative !important;
}

这是用 jQuery 设置淡入淡出的显示方式。如果显示设置为绝对值，则任何具有特定 % 值的潜水都会相互堆叠。

@Davidkamer 在 JS 聊天中为我提供了这个答案的帮助。感谢他!