¿Alisa esta animación de alternar jQuery?

La animación producida por mi función jQuery es inestable, y he estado buscando a través de diferentes soluciones de SO, como agregar jquery.easing, pero no tuve suerte. ¿El problema son los iframes en cada div?¿Alisa esta animación de alternar jQuery?

¿Alguna idea sobre cómo suavizar la animación? ¿Mi función básica de alternar es la mejor?

jsFiddle:http://jsfiddle.net/gwLcD/8/

El margen básico es abajo, y se repite numerosas veces en la página (con bloques de texto en entre cada "videotoggle" div):

<div class="videotoggle"> 

    <p><h2 class="entry-title">View a few minutes of the (title) video </h2></p> 

    <div class="videoblock"> 

    <iframe width="560" height="315" src="http://www.youtube.com/embed/????????" 
    frameborder="0" allowfullscreen></iframe> 

    </div></div>

Y la función:

$(document).ready(function(){ 
$(".videoblock").hide(); //closes all divs on first page load 
$(".entry-title").click(function() { 
    $this = $(this); //this next code only allows one open div at a time 
    $content = $this.closest('.videotoggle').find(".videoblock"); 
    if (!$this.is('.active-title')) { 
     $('.active-title').removeClass('active-title'); 
     $this.addClass('active-title'); 
     $(".videoblock:visible").slideToggle(400); //slide toggle 
     $content.slideToggle(400); 
    } 
}); 
});

Fuente

2012-01-26 markratledge

¿Puedes replicarlo en jsfiddle? – Jivings

Parece que funciona bien para mí en Chrome: http://jsfiddle.net/gwLcD/3/ – Jivings

En realidad, ver el violín de Jivings en winff 9.x resulta en una animación algo entrecortada. – kontur

solución de Andrew es correcta, pero aun puso el css como esto (si javascript está desactivado): .videoblock {width: de 560; altura: 315px; overflow: hidden}

y añadir la animación simultánea:

$('.videoblock').css('height','0'); 
$(".entry-title").click(function() { 
    $this = $(this); 
    $content = $this.closest('.videotoggle').find(".videoblock"); 
    if (!$this.is('.active-title')) { 

     $('.active-title').removeClass('active-title'); 
     $this.addClass('active-title'); 
     $(".videoblock:visible").animate({height: "0"}, { duration: 400, queue: false }); 
     $content.animate({height: "315"}, { duration: 400, queue: false }); 
    } 
});

Aquí está el enlace a la final: http://jsfiddle.net/gwLcD/21/

Fuente

2012-01-29 16:21:56

Gracias! Funciona muy bien y permite solo un div abierto en cualquier momento, como lo necesito. – markratledge

mira esto - http://jsfiddle.net/vbXVR/.

que utiliza este jQuery

$(document).ready(function(){ 
    $(".entry-title").click(function() { 
     $(".videoblock").animate({height: "315"}, 1500); 
    }); 
});

Fuente

2012-01-28 21:34:48 theliberalsurfer

Personalmente me he encontrado con el extraño comportamiento de jquerys "automáticos" alternar, mostrar, fundir, ... animaciones con respecto a elementos "no pintados". Yo también puedo decir que a menudo animando una propiedad trabajé a mano para resolver el problema, tal como Andrew sugiere aquí. – kontur

+1 solución agradable y simple. –

Agregué un jsfiddle: http://jsfiddle.net/gwLcD/8/ La parte ligeramente compleja es que tengo la función configurada para permitir solo un div abierto a la vez. – markratledge

algún motivo específico que usted no desea utilizar un plugin de acordeón directamente? La biblioteca jQuery UI debería encargarse de esto bastante bien.

Además, en caso de que no funcione como se esperaba, ¿puedes probar las animaciones css3? Se puede obtener una esencia de animaciones CSS3 aquí: http://titansturf.in/2012/01/12/using-css3-transitions/

Usted tendrá que crear dos clases, una con div-hide, que tiene height: 0 y uno con div-show que tiene la necesaria height conjunto. Siempre que quieras alternar, simplemente cambia la clase usando jQuery.

IMO, con CSS3 sería una buena opción en caso de que su público objetivo utilice navegadores modernos. De lo contrario, puede usar Modernizr para cambiar la forma en que funcionan las cosas de acuerdo con el tipo de navegador que se utiliza.

Fuente

2012-02-01 07:15:39 Neeraj

¿Para qué navegador estás apuntando principalmente? Si se trata de cualquiera de los navegadores web o FireFox, entonces podría aprovechar las transiciones CSS3 aceleradas por hardware con un repliegue jquery.

http://msdn.microsoft.com/en-us/scriptjunkie/hh304380

No creo jQuery aliviar actualmente utiliza transiciones CSS3, como primera opción, pero me corrija si estoy equivocado.

Tome un vistazo a: http://css3.bradshawenterprises.com/all/

No sería demasiado esfuerzo en absoluto para cortar algo utilizando CSS3.

Fuente

2012-02-04 15:42:39 backdesk

¡Mírelo de esta manera!

No estoy seguro de cuántos de estos iframes va a cargar en una página aquí, pero una cosa parece ser muy cierta; si tiene demasiados, tendrá suficientes iframes con suficientes videos de youtube cargándose.

Lo que significa, cargas innecesarias. El usuario no puede hacer clic en todos esos enlaces. El usuario no puede ver todos esos videos.

Así:

Hay una hinchazón innecesaria de los recursos, y un consumo innecesario de ancho de banda del usuario.
Y, además, esto no es escalable. Considera que necesitas 50 de esos enlaces en una página. DE ACUERDO. Tome solo 10. ¡Incluso eso es bastante!

Estoy trabajando en un jsfiddle para este. Lo publicaremos aquí, cuando haya terminado!

Fuente

2012-02-04 19:49:47

Vaya allí: http://jsfiddle.net/GGS4N/ –

¿Alisa esta animación de alternar jQuery?

Respuesta

Cuestiones relacionadas