Smussa questa animazione di attivazione jQuery?

Question

L'animazione prodotta con la funzione jQuery di è tremolante e ho esaminato diverse soluzioni SO, ad esempio aggiungendo jquery.easing, ma senza fortuna. Il problema è l'iframe in ogni div?

Qualche idea su come appianare l'animazione? La mia funzione di attivazione di base è la migliore?

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

Il markup di base è inferiore, e si ripete numerose volte sulla pagina (con i blocchi di testo tra ogni "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> 

E la funzione:

$(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); 
    } 
}); 
}); 

Answer 1

soluzione di Andrew è corretto, ma vorrei comunque mettere il css come questo (se javascript è spento): .videoblock {width: 560px; altezza: 315 px; overflow: hidden}

e aggiungere l'animazione simultanea:

$('.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 }); 
    } 
}); 

Ecco il link alla finale: http://jsfiddle.net/gwLcD/21/

Answer 2

verificarlo - http://jsfiddle.net/vbXVR/.

usa questo jquery

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

Answer 3

Qual è il motivo specifico non si desidera utilizzare direttamente un plugin fisarmonica? La libreria dell'interfaccia utente di jQuery dovrebbe occuparsene abbastanza bene.

Inoltre, nel caso in cui non funzioni come previsto, puoi provare le animazioni di css3? È possibile ottenere una sostanza di CSS3 animazioni qui: http://titansturf.in/2012/01/12/using-css3-transitions/

Si dovrà creare due classi, una con div-hide, che ha height: 0 e uno con div-show che ha la necessaria height set. Ogni volta che vuoi passare, basta cambiare la classe usando jQuery.

IMO, l'utilizzo di CSS3 sarebbe una buona opzione nel caso in cui il pubblico di destinazione utilizzi browser moderni. In caso contrario, è possibile utilizzare Modernizr per modificare il modo in cui le cose funzionano in base al tipo di browser utilizzato.

Answer 4

Per quale browser spari principalmente? Se si tratta di uno qualsiasi dei browser Webkit o FireFox, è possibile sfruttare le transizioni CSS3 con accelerazione hardware con un fallback jquery.

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

Non credo jQuery facilitando attualmente utilizza le transizioni CSS3 come prima opzione, ma mi corregga se sbaglio.

Date un'occhiata a: http://css3.bradshawenterprises.com/all/

Non sarebbe troppo sforzo a tutti di incidere qualcosa con CSS3.

Answer 5

Diamo un'occhiata in questo modo!

Non sono sicuro di quanti di questi iframe verranno caricati su una pagina qui, ma una cosa sembra essere molto certa; se ne hai uno di troppo, avrai un numero sufficiente di iframe con un numero sufficiente di video su YouTube che si caricano.

Che significa, carichi inutili. L'utente non può fare clic su tutti questi collegamenti. L'utente non può guardare tutti quei video.

Quindi:

1. C'è un inutile gonfiare up delle risorse, ed un consumo inutile di larghezza di banda dell'utente.

2. E, inoltre, questo non è scalabile. Considera, hai bisogno di 50 di questi link su una pagina. OK. Prendi solo 10. Anche questo è abbastanza!

Sto lavorando a un jsfiddle per questo. Pubblicherà qui, quando sarà finito!