unappend - remove content div jquery
¿Qué son las colas en jQuery? (6)
Animación de múltiples objetos en una cola.
Aquí hay un ejemplo simple de animación de múltiples objetos en una cola.
Jquery nos permite hacer cola sobre un solo objeto. Pero dentro de la función de animación podemos acceder a otros objetos. En este ejemplo, creamos nuestra cola sobre el objeto #q mientras animamos los objetos # box1 y # box2.
Piense en la cola como una serie de funciones. Así que puedes manipular la cola como una matriz. Puede usar push, pop, unshift, shift para manipular la cola. En este ejemplo, eliminamos la última función de la cola de animación y la insertamos al principio.
Cuando hayamos terminado, comenzamos la cola de animación mediante la función dequeque ().
html:
<button id="show">Start Animation Queue</button>
<p></p>
<div id="box1"></div>
<div id="box2"></div>
<div id="q"></div>
js
$(function(){
$(''#q'').queue(''chain'',function(next){
$("#box2").show("slow", next);
});
$(''#q'').queue(''chain'',function(next){
$(''#box1'').animate(
{left: 60}, {duration:1000, queue:false, complete: next}
)
});
$(''#q'').queue(''chain'',function(next){
$("#box1").animate({top:''200''},1500, next);
});
$(''#q'').queue(''chain'',function(next){
$("#box2").animate({top:''200''},1500, next);
});
$(''#q'').queue(''chain'',function(next){
$("#box2").animate({left:''200''},1500, next);
});
//notice that show effect comes last
$(''#q'').queue(''chain'',function(next){
$("#box1").show("slow", next);
});
});
$("#show").click(function () {
$("p").text("Queue length is: " + $(''#q'').queue("chain").length);
// remove the last function from the animation queue.
var lastFunc = $(''#q'').queue("chain").pop();
// insert it at the beginning:
$(''#q'').queue("chain").unshift(lastFunc);
//start animation queue
$(''#q'').dequeue(''chain'');
});
css:
#box1 { margin:3px; width:40px; height:40px;
position:absolute; left:10px; top:60px;
background:green; display: none; }
#box2 { margin:3px; width:40px; height:40px;
position:absolute; left:100px; top:60px;
background:red; display: none; }
p { color:red; }
Encontré que el documento jQuery.com en la queue() / dequeue() es demasiado simple de entender. ¿Qué son exactamente las colas en jQuery? ¿Cómo debo usarlos?
Los usos de jQuery .queue() y .dequeue()
Queues en jQuery se utilizan para animaciones. Puede utilizarlos para cualquier propósito que desee. Son una serie de funciones almacenadas por elemento, utilizando jQuery.data() . Son los primeros en entrar en salir (FIFO). Puede agregar una función a la cola llamando a .queue() , y eliminar (llamando a) las funciones usando .dequeue() .
Para entender las funciones internas de la cola de jQuery, leer la fuente y ver ejemplos me ayuda enormemente. Uno de los mejores ejemplos de una función de cola que he visto es .delay() :
$.fn.delay = function( time, type ) {
time = jQuery.fx ? jQuery.fx.speeds[time] || time : time;
type = type || "fx";
return this.queue( type, function() {
var elem = this;
setTimeout(function() {
jQuery.dequeue( elem, type );
}, time );
});
};
La cola por defecto - fx
La cola predeterminada en jQuery es fx . La cola predeterminada tiene algunas propiedades especiales que no se comparten con otras colas.
- Inicio automático: al llamar a
$(elem).queue(function(){});la cola defxdequeueautomáticamente la siguiente función y la ejecutará si la cola no se ha iniciado. - ''inprogress'' centinela: Cada vez que
dequeue()una función de la cola defx, seunshift()(insertará en la primera ubicación de la matriz) la cadena"inprogress", que"inprogress"que la cola se está ejecutando actualmente. - ¡Es el predeterminado! La cola
fxes utilizada por.animate()y todas las funciones que lo llaman por defecto.
NOTA: Si está utilizando una cola personalizada, debe .dequeue() las funciones manualmente, ¡no se iniciarán automáticamente!
Recuperando / configurando la cola
Puede recuperar una referencia a una cola jQuery llamando a .queue() sin un argumento de función. Puede usar el método si desea ver cuántos elementos hay en la cola. Puede usar push , pop , unshift , shift para manipular la cola en su lugar. Puede reemplazar toda la cola pasando una matriz a la función .queue() .
Ejemplos rápidos:
// lets assume $elem is a jQuery object that points to some element we are animating.
var queue = $elem.queue();
// remove the last function from the animation queue.
var lastFunc = queue.pop();
// insert it at the beginning:
queue.unshift(lastFunc);
// replace queue with the first three items in the queue
$elem.queue(queue.slice(0,3));
Un ejemplo de cola de animación ( fx ):
$(function() {
// lets do something with google maps:
var $map = $("#map_canvas");
var myLatlng = new google.maps.LatLng(-34.397, 150.644);
var myOptions = {zoom: 8, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP};
var geocoder = new google.maps.Geocoder();
var map = new google.maps.Map($map[0], myOptions);
var resized = function() {
// simple animation callback - let maps know we resized
google.maps.event.trigger(map, ''resize'');
};
// wait 2 seconds
$map.delay(2000);
// resize the div:
$map.animate({
width: 250,
height: 250,
marginLeft: 250,
marginTop:250
}, resized);
// geocode something
$map.queue(function(next) {
// find ''s whois address:
geocoder.geocode({''address'': ''55 Broadway New York NY 10006''},handleResponse);
function handleResponse(results, status) {
if (status == google.maps.GeocoderStatus.OK) {
var location = results[0].geometry.location;
map.setZoom(13);
map.setCenter(location);
new google.maps.Marker({ map: map, position: location });
}
// geocoder result returned, continue with animations:
next();
}
});
// after we find , wait 3 more seconds
$map.delay(3000);
// and resize the map again
$map.animate({
width: 500,
height: 500,
marginLeft:0,
marginTop: 0
}, resized);
});
Otro ejemplo de cola personalizado
var theQueue = $({}); // jQuery on an empty object - a perfect queue holder
$.each([1,2,3],function(i, num) {
// lets add some really simple functions to a queue:
theQueue.queue(''alerts'', function(next) {
// show something, and if they hit "yes", run the next function.
if (confirm(''index:''+i+'' = ''+num+''/nRun the next function?'')) {
next();
}
});
});
// create a button to run the queue:
$("<button>", {
text: ''Run Queue'',
click: function() {
theQueue.dequeue(''alerts'');
}
}).appendTo(''body'');
// create a button to show the length:
$("<button>", {
text: ''Show Length'',
click: function() {
alert(theQueue.queue(''alerts'').length);
}
}).appendTo(''body'');
Cola de llamadas ajax:
Desarrollé un $.ajaxQueue() que usa $.Deferred , .queue() y $.ajax() para devolver una promise que se resuelve cuando se completa la solicitud. Otra versión de $.ajaxQueue que aún funciona en 1.4 se publica en mi respuesta a Secuenciación de solicitudes de Ajax
/*
* jQuery.ajaxQueue - A queue for ajax requests
*
* (c) 2011 Corey Frang
* Dual licensed under the MIT and GPL licenses.
*
* Requires jQuery 1.5+
*/
(function($) {
// jQuery on an empty object, we are going to use this as our Queue
var ajaxQueue = $({});
$.ajaxQueue = function( ajaxOpts ) {
var jqXHR,
dfd = $.Deferred(),
promise = dfd.promise();
// queue our ajax request
ajaxQueue.queue( doRequest );
// add the abort method
promise.abort = function( statusText ) {
// proxy abort to the jqXHR if it is active
if ( jqXHR ) {
return jqXHR.abort( statusText );
}
// if there wasn''t already a jqXHR we need to remove from queue
var queue = ajaxQueue.queue(),
index = $.inArray( doRequest, queue );
if ( index > -1 ) {
queue.splice( index, 1 );
}
// and then reject the deferred
dfd.rejectWith( ajaxOpts.context || ajaxOpts,
[ promise, statusText, "" ] );
return promise;
};
// run the actual query
function doRequest( next ) {
jqXHR = $.ajax( ajaxOpts )
.done( dfd.resolve )
.fail( dfd.reject )
.then( next, next );
}
return promise;
};
})(jQuery);
Ahora he agregado esto como un artículo en learn.jquery.com , hay otros grandes artículos en ese sitio sobre colas, mira.
Este hilo me ayudó mucho con mi problema, pero he usado $ .queue de una manera diferente y pensé que publicaría lo que se me ocurrió aquí. Lo que necesitaba era una secuencia de eventos (cuadros) para activarse, pero la secuencia para construirse dinámicamente. Tengo un número variable de marcadores de posición, cada uno de los cuales debe contener una secuencia animada de imágenes. Los datos se guardan en una matriz de matrices, así que recorro las matrices para construir cada secuencia para cada uno de los marcadores de posición de esta manera:
/* create an empty queue */
var theQueue = $({});
/* loop through the data array */
for (var i = 0; i < ph.length; i++) {
for (var l = 0; l < ph[i].length; l++) {
/* create a function which swaps an image, and calls the next function in the queue */
theQueue.queue("anim", new Function("cb", "$(''ph_"+i+"'' img'').attr(''src'', ''/images/"+i+"/"+l+".png'');cb();"));
/* set the animation speed */
theQueue.delay(200,''anim'');
}
}
/* start the animation */
theQueue.dequeue(''anim'');
Esta es una versión simplificada de la secuencia de comandos a la que he llegado, pero debería mostrar el principio: cuando se agrega una función a la cola, se agrega mediante el constructor de funciones. De esta forma, la función se puede escribir dinámicamente utilizando variables del bucle ( s). Observe la forma en que se pasa la función al argumento para la siguiente () llamada, y esto se invoca al final. La función en este caso no tiene dependencia de tiempo (no usa $ .fadeIn ni nada de eso), por lo que escaloné los marcos usando $ .delay.
Las funciones makeRed y makeBlack utilizan la queue y la queue dequeue para ejecutarse entre sí. El efecto es que, el elemento ''#wow'' parpadea continuamente.
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(''#wow'').click(function(){
$(this).delay(200).queue(makeRed);
});
});
function makeRed(){
$(''#wow'').css(''color'', ''red'');
$(''#wow'').delay(200).queue(makeBlack);
$(''#wow'').dequeue();
}
function makeBlack(){
$(''#wow'').css(''color'', ''black'');
$(''#wow'').delay(200).queue(makeRed);
$(''#wow'').dequeue();
}
</script>
</head>
<body>
<div id="wow"><p>wow</p></div>
</body>
</html>
Para entender el método de la cola, debes entender cómo jQuery hace la animación. Si escribe varias llamadas de método animado una tras otra, jQuery crea una cola ''interna'' y le agrega estas llamadas de método. Luego corre esas llamadas animadas una por una.
Considere el siguiente código.
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
//This is the reason that nonStopAnimation method will return immeidately
//after queuing these calls.
$(''#box'').animate({ left: ''+=500''}, 4000);
$(''#box'').animate({ top: ''+=500''}, 4000);
$(''#box'').animate({ left: ''-=500''}, 4000);
//By calling the same function at the end of last animation, we can
//create non stop animation.
$(''#box'').animate({ top: ''-=500''}, 4000 , nonStopAnimation);
}
El método ''queue'' / ''dequeue'' le da control sobre esta ''cola de animación''.
Por defecto, la cola de animación se llama ''fx''. He creado una página de muestra aquí que tiene varios ejemplos que ilustrarán cómo se podría usar el método de la cola.
http://jsbin.com/zoluge/1/edit?html,output
Código para la página de muestra anterior:
$(document).ready(function() {
$(''#nonStopAnimation'').click(nonStopAnimation);
$(''#stopAnimationQueue'').click(function() {
//By default all animation for particular ''selector''
//are queued in queue named ''fx''.
//By clearning that queue, you can stop the animation.
$(''#box'').queue(''fx'', []);
});
$(''#addAnimation'').click(function() {
$(''#box'').queue(function() {
$(this).animate({ height : ''-=25''}, 2000);
//De-queue our newly queued function so that queues
//can keep running.
$(this).dequeue();
});
});
$(''#stopAnimation'').click(function() {
$(''#box'').stop();
});
setInterval(function() {
$(''#currentQueueLength'').html(
''Current Animation Queue Length for #box '' +
$(''#box'').queue(''fx'').length
);
}, 2000);
});
function nonStopAnimation()
{
//These multiple animate calls are queued to run one after
//the other by jQuery.
$(''#box'').animate({ left: ''+=500''}, 4000);
$(''#box'').animate({ top: ''+=500''}, 4000);
$(''#box'').animate({ left: ''-=500''}, 4000);
$(''#box'').animate({ top: ''-=500''}, 4000, nonStopAnimation);
}
Ahora puedes preguntar, ¿por qué debería molestarme con esta cola? Normalmente, no lo harás. Pero si tiene una secuencia de animación complicada que desea controlar, los métodos de cola / salida de cola son su amigo.
También vea esta interesante conversación en jQuery group sobre cómo crear una secuencia de animación complicada.
Demostración de la animación:
http://www.exfer.net/test/jquery/tabslide/
Déjame saber si todavía tienes preguntas.
Te permite poner en cola las animaciones ... por ejemplo, en lugar de esto
$(''#my-element'').animate( { opacity: 0.2, width: ''100px'' }, 2000);
Que desvanece el elemento y hace que el ancho de 100 px al mismo tiempo . Usar la cola te permite organizar las animaciones. Así que uno termina después del otro.
$("#show").click(function () {
var n = $("div").queue("fx");
$("span").text("Queue length is: " + n.length);
});
function runIt() {
$("div").show("slow");
$("div").animate({left:''+=200''},2000);
$("div").slideToggle(1000);
$("div").slideToggle("fast");
$("div").animate({left:''-=200''},1500);
$("div").hide("slow");
$("div").show(1200);
$("div").slideUp("normal", runIt);
}
runIt();
Ejemplo de http://docs.jquery.com/Effects/queue