使用mixitup js重复几次效果

repeat several times effect with mixitup js

本文关键字：几次 mixitup js 使用更新时间：2023-09-26

有一种方法可以在加载文档时触发混合效果至少6次。我已经知道怎么做一次了，但我至少需要6次。

我已经尝试了很多事情，甚至编辑js，但我不知道在哪个部分你说多少次的动作将被执行。

$(document).ready(function(){
        $(function(){
        console.log("press");
        $('#Container').mixItUp();
        $('#shuffle').click();      
        });
});
<div class="index">
<div class="row-fluid">
  <div class="span12">
            <input type="button" class="sort" data-sort="random" id="shuffle"      name="shuffle" value="shuffle" >
            <input type="hidden" id="Errores" value="0" />
    <div class="row-fluid">
    <div class="span8" id="Container">
      <div class="card-container span2 mix category-2" data-value="1" id="naipe1" onclick="VoltearNaipe('#naipe1')" >
        <div class="card">
            <input type="hidden" id="naipe1valor" value="1" />
            <input type="hidden" id="naipe1par" value="1" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/naipe2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->
     <div class="card-container span2 mix category-2"  data-value="2" id="naipe2"  onclick="VoltearNaipe('#naipe2')" >
        <div class="card">
            <input type="hidden" id="naipe2valor" value="1" />
            <input type="hidden" id="naipe2par" value="1" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/naipe2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

    <div class="card-container span2 mix category-1"  data-value="3" id="naipe3"  onclick="VoltearNaipe('#naipe3')" >
        <div class="card">
            <input type="hidden" id="naipe3valor" value="2" />
            <input type="hidden" id="naipe3par" value="2" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->
    <div class="card-container span2 mix category-1"   data-value="4" id="naipe4"  onclick="VoltearNaipe('#naipe4')" >
        <div class="card">
            <input type="hidden" id="naipe4valor" value="2" />
            <input type="hidden" id="naipe4par" value="2" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta2.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->

    <div class="card-container span2 mix category-1"  data-value="5"  id="naipe5"  onclick="VoltearNaipe('#naipe5')" >
        <div class="card">
            <input type="hidden" id="naipe5valor" value="2" />
            <input type="hidden" id="naipe5par" value="3" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta3.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->
    <div class="card-container span2 mix category-1"  data-value="6" id="naipe6"  onclick="VoltearNaipe('#naipe6')" >
        <div class="card">
            <input type="hidden" id="naipe6valor" value="2" />
            <input type="hidden" id="naipe6par" value="3" />
            <div class="front">
             <img src="css/img/back2.png" />
            </div><!---front --->
            <div class="back">
                <img src="css/img/carta3.png"  style="width:171px;" height="238px;"alt="">
            </div><!--- back--->
        </div><!---card --->
    </div><!---cardcontainer --->
    </div><!--- span8--->
    <div class="span4">
        <div class="row-fluid">
            <div class="contador span12"><span2 id="contadorpuntos">0</span2></div>
            <div class="span12">
                <p>
                    Da click en 2 imágenes y 
                    si el par coincide 
                    acumulas puntos.
                    ¡Puedes canjear tus 
                    puntos por descuentos 
                    increíbles!
                </p>
                <div class="span5 vidas">
                    <div class="span2"><img src="css/img/heart.jpg" id="vida1" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida2" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida3" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida4" class="" alt=""></div>
                    <div class="span2"><img src="css/img/heart.jpg" id="vida5" class="" alt=""></div>
                </div>
            </div>
        </div><!-- /.row-fluid -->
    </div><!-- /.span4 -->
    </div><!---row-fluid --->
  </div><!--- span212--->

您可以通过设置超时事件来做到这一点，如下块所示:

setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 1000
)
setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 2000
)
setTimeout(
    function(){
        $('#Container').mixItUp('sort', 'random');
    }, 3000
)

这段代码可能还可以优化。

旁注:您应该使用html特殊字符来表示西班牙语标点符号和重音标记(á, í, ¡)