Question

首先，去那里看看，然后单击开关（“传入/立即发送”）：https://ilovesubiaco.com.au/events-search/

如您所见，我的开关正在工作，但是在我的“立即行动”事件中，我的图块彼此堆叠。

原因是我每个元素的主div的elements.style（ col-lg-3 col-sm-4 col-xs-12 masonery_item event-now-tile ）都没有计算正确地向左移动，可能是因为在加载html时未显示我的图块。

我进行了一些测试，试图删除第一个“ fadeOut（0）”以查看是否可以对其进行调整。在这种情况下，我的图块每个元素的剩余百分比正确，但是问题是我的图块在不显示后仍占据空白。

我还尝试用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

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

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

这是使用jQuery淡入淡出设置显示的方式。如果将显示值设置为“绝对”，则具有一定百分比值的所有潜水将彼此堆叠。

@Davidkamer在JS聊天中获得了有关此答案的帮助。多亏他！

JS fadeIn和BootStrap |发行自动计算剩余的百分比保证金

1 个答案: