Question

大家好HERE你可以看到网站正在运行。
使用它点击缩略图然后使用过滤器，你可以看到第二行的缩略图上升在屏幕之外，然后回来。

我正在使用MIXITUP插件。

这是我在过滤器上应用“点击”事件以折叠蓝色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 ito

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");
                    });
                };

Mixitup插件问题

1 个答案: