Mixitup插件的问题

Question

大家好

HERE您可以查看该站点的运行情况。

使用它点击一个缩略图，然后使用过滤器，你可以看到第二行的缩略图出现在屏幕之外，然后又回来了。

我使用的是MIXITUP插件。

这是我在过滤器上应用于"click“事件的代码，用于折叠蓝色div并移除缩略图下的填充。

jQuery(document).ready(function($){             
                var divcasiclinici = $(".divcasiclinici");
                var viewportWidth = $(window).width();
                if(viewportWidth > 768){
                    $("#filtroclinici").click(function(){
                        $('.mix').css({ paddingBottom: '0px' }, 0);
                        $(divcasiclinici).css("display", "none");
                        $(".frecciaportfolio").css("display", "none");
                    });
                };

这里是第一个元素/行/缩略图的代码(很抱歉缩进，但WP弄得一团糟！)

<ul id="Grid">
<li class="mix dentosofia"><div class="triggerport" id="thumbclinico1"><div class="frecciaportfolio"></div>
<img src="http://localhost/Wordpress/wp-content/uploads/2013/12/maria_prima.jpg" style="height:auto;"/>
<div class="nomicasistudio">Maria</div></div>

<div class="divclinicoabsolute">
<div style="clear:both;" id="contfascia" class="divcasiclinici divclinico1">
<div class="fascione" style="background-color:#1fbeca;"></div>
<div class="close"><img src="http://studiodentisticocova.com/img/close.png"/></div>
<div class="total titlecasistudio" style="color:white;" >Dentosofia</div>
<div class="total nomicasistudio">Maria 14 anni</div>
<div id="team-container">
<div class="casistudio one_fourth column provamobile" >
<img src="http://localhost/Wordpress/wp-content/uploads/2013/12/maria_prima.jpg" style="height:auto;"/>
<div class="nomicasistudio">Maria Prima</div>
</div>
<div class="casistudio one_fourth column provamobile lastmobile" >
<img src="http://localhost/Wordpress/wp-content/uploads/2013/12/maria_dopo.jpg" style="height:auto;"/>
<div class="nomicasistudio">Maria Dopo</div>
</div>
<div class="clearmobile">
<div class="casistudio one_fourth column provamobile" >
<img src="http://localhost/Wordpress/wp-content/uploads/2013/12/Maria-2.jpg" style="height:auto;"/>
<div class="nomicasistudio">Sintomi iniziali</div>
</div>
<div class="casistudio one_fourth column last provamobile" >
<img src="http://localhost/Wordpress/wp-content/uploads/2013/12/Maria-3.jpg" style="height:auto;"/>
<div class="nomicasistudio">Dopo 14 mesi</div>
</div>
</div>
<div class="predesccasistuido">
<div class="one_half column casostudio" >
<div><span class="subtitlecasistudio" style="color:white;">Diagnosi</span></div>
<h6>Il soggetto presentava una seconda classe (mandibola indietro rispetto all’arcata superiore)</h6>
</div>
<div class="one_half column casostudio last">
<div><span class="subtitlecasistudio" style="color:white;">Risultato</span></div>
<h6>Dopo 14 mesi utilizzando l’attivatore si può notare come il problema della seconda classe si sia completamente risolto. È visibile anche un netto miglioramento a livello dei denti superiori con una forte riduzione dello sventagliamento degli stessi.</h6>
</div>
</div>
</div>
</div>
</div>

</li>

我不知道如何解决它，我想我应该增加一个插件的动画延迟，但我不能。有谁有主意吗？

解决了！我在插件中添加了一个Settimeout

setTimeout(function() {  
 goMix(config.filter, null, null, $cont, config); 
},100);

Answer 1

解决了！我在插件中添加了一个setTimeout，以增加100ms的延迟，以便在这段时间内可以执行我之前编写的所有操作(点击过滤器)

修改插件：

setTimeout(function() {  
     goMix(config.filter, null, null, $cont, config); 
    },100);

所以我给你时间来完成这项工作：

jQuery(document).ready(function($){             
                var divcasiclinici = $(".divcasiclinici");
                var viewportWidth = $(window).width();
                if(viewportWidth > 768){
                    $("#filtroclinici").click(function(){
                        $('.mix').css({ paddingBottom: '0px' }, 0);
                        $(divcasiclinici).css("display", "none");
                        $(".frecciaportfolio").css("display", "none");
                    });
                };