Főoldalra

jQuery queue() dequeue() clearQueue()

queue()              Megmutatja, vagy meghatározza a sorban várakozó funkciókat, melyeket el kell végezni a kiválasztott elemeknél.

dequeue()          Eltávolítja  funkciót a sorból, majd végrehajtja a további funkciókat.

clearQueue()     Eltávolítja az összes feladatot a sorban várakozók közül, melyek még nem futottak le, új esemény bekövetkezésekor.

1. Példa:

<head>
<script>
$(document).ready(function(){
	var sebesseg=2000;
    var elem_id = $("#teszt01");
    $("#btnstart").click(function(){
        elem_id.animate({height: 200}, sebesseg);
        elem_id.animate({width: 200}, sebesseg);
        elem_id.queue( function () {
            elem_id.css("background-color", "red");  
            // elem_id.dequeue();
        });
        elem_id.animate({height: 150}, sebesseg);
        elem_id.animate({width: 350}, sebesseg);
		elem_id.css("background-color", "green");
        elem_id.animate({height: 100}, sebesseg);
        elem_id.animate({width: 100}, sebesseg);
    });
		
    $("#btnstop").click(function(){
        elem_id.clearQueue();
    });
});
</script>
</head>

<head>
<script>
$(document).ready(function(){
	var sebesseg=2000;
    var elem = $("#teszt02");
    $("#btnstart").click(function(){
        elem.animate({height: 200}, sebesseg);
        elem.animate({width: 200}, sebesseg);
        elem.queue( function () {
            elem.css("background-color", "red");  
            elem.dequeue();
        });
        elem.animate({height: 150}, sebesseg);
        elem.animate({width: 350}, sebesseg);
		elem.css("background-color", "green");
        elem.animate({height: 100}, sebesseg);
        elem.animate({width: 100}, sebesseg);
    });
		
    $("#btnstop").click(function(){
        elem.clearQueue();
    });
});
</script>
</head>

<body>
<div style="height:250px;width:350px;">
	<div id="teszt01" style="background:orange; border:2px solid red; height:100px;width:100px;position:relative"></div>
</div>
<br />
<div style="height:250px;width:350px;">
	<div id="teszt02" style="background:yellow; border:2px solid red; height:100px;width:100px;position:relative"></div>
</div>
</body>






2. Példa:
A queue megmutatja a sorban várakozó feladatok (funkciók) számát (lenght), azaz, ennyi feladatot kell végrehajtani.

<head>

<script>
$(document).ready(function(){
	var sebesseg=2000;
	
    $("#Queuestart").click(function(){
        var Qdiv = $("#Queue");
		
        startAnimation();
        showQueue();

        function startAnimation(){
            Qdiv.animate({height: 200}, sebesseg);
            Qdiv.animate({width: 300}, sebesseg);
            Qdiv.animate({height: 100}, sebesseg);
            Qdiv.animate({width: 100}, sebesseg, startAnimation);
        }

        function showQueue(){ var q = Qdiv.queue();
            $("#Qspan").text(q.length);   
            setTimeout(showQueue);
        }
    });
});

</script>
</head>	

<head>
<script>
$(document).ready(function(){
	var sebesseg=2000;
    $("#Queuestart").click(function(){
        var Qdiv02 = $("#Queue02");
        startAnimation();
        showQueue();

        function startAnimation(){
            Qdiv02.animate({height: 200}, sebesseg);
            Qdiv02.animate({width: 300}, sebesseg);
            Qdiv02.animate({height: 100}, sebesseg);
            Qdiv02.animate({width: 100}, sebesseg);
            Qdiv02.animate({height: 150}, sebesseg);
            Qdiv02.animate({width: 200}, sebesseg);
            Qdiv02.animate({height: 50}, sebesseg);
            Qdiv02.animate({width: 50}, sebesseg);
        }

        function showQueue(){ var q = Qdiv02.queue();
            $("#Qspan02").text(q.length);   
            setTimeout(showQueue);
        }
    });
});
</script>
</head>

<body>
<p>Ennyi feladatot kell végrehajtani: <span id="Qspan"></span></p>
    <div style="height:300px;width:300px;">
            <div id="Queue" style="width:50px;height:50px;margin-left:10px; margin-top:10px;background-color:red;"></div>
    </div>

<p>Ennyi feladatot kell végrehajtani: <span id="Qspan02"></span></p>
    <div style="height:300px;width:300px;">
            <div id="Queue02" style="width:50px;height:50px;margin-left:10px; margin-top:10px;background-color:green;"></div>
    </div>
<button id="Queuestart">Start Animation.<br />Kattints ide!</button>
</body>

Ennyi feladatot kell végrehajtani:

Ennyi feladatot kell végrehajtani: