L'animation produite forte> par ma fonction JQuery est shaky et j'ai examiné différentes solutions, telles que l'ajout de jQuery.ase, mais pas de chance. Le problème est-ce que les iframes dans chaque div? Des idées sur la manière de lisser l'animation? Est ma fonction de basse bascule le meilleur moyen? P> jsfiddle: strong> http. : //jsfiddle.net/gwlcd/8/ p> et la fonction: strong> p> $(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);
}
});
});
5 Réponses :
Consultez cette sortie - http://jsfiddle.net/vbxvr/ .
Il utilise ceci jQuery
J'ai personnellement rencontré un comportement étrange de JQuerys "automatisé" basculer, montrant, fondu, ... animations concernant des éléments "non intimé". Moi aussi, je peux dire que l'animation souvent une propriété à la main a travaillé pour résoudre le problème, tout comme Andrew suggère ici.
J'ai ajouté un jsfiddle: jsfiddle.net/gwlcd/8 La partie légèrement complexe est que j'ai le Fonction Configurez uniquement pour permettre à une division ouverte à la fois.
La solution d'Andrew est correcte, mais je voudrais toujours mettre le CSS comme celui-ci (si JavaScript est éteint): .Videoblock {largeur: 560px; Hauteur: 315px; Overflow: caché}
et ajoutez l'animation simultanée: voici le lien vers la finale: HTPTP://jsfiddle.net/gwlcd/21/
Merci! Fonctionne bien et ne permet qu'un seul div ouvrir à tout moment, comme si j'ai besoin.
Toute raison spécifique que vous ne souhaitez pas utiliser directement un plugin accordéon? La bibliothèque de l'interface utilisateur JQuery devrait prendre en charge cette assez joliment.
Également, au cas où cela ne fonctionne pas comme prévu, pouvez-vous essayer des animations CSS3? Vous pouvez obtenir un gist d'animations CSS3 ici: http://titansturf.in/ 2012/01/12 / Utilisation-CSS3-Transitions /
Vous devrez créer deux classes, une avec IMO, en utilisant CSS3 serait une bonne option incase votre public cible utilise des navigateurs modernes. Sinon, vous pouvez utiliser MODIDIZR pour modifier la façon dont les choses fonctionnent en fonction du type de navigateur utilisé. div-masquer , qui a hauteur: 0 et un avec div-show qui a la hauteur définie requise. Chaque fois que vous voulez basculer, changez simplement la classe en utilisant jQuery.
Quel navigateur êtes-vous principalement gunning? Si vous utilisez des navigateurs WebKit ou Firefox, vous pourriez tirer parti des transitions CSS3 accélérées du matériel avec une replie JQuery.
http://msdn.microsoft.com/en-us/scriptjunkie/hh304380 < / a>
Je ne pense pas que JQuery Easing utilise actuellement des transitions CSS3 comme une première option, mais corrige-moi si je me trompe.
Jetez un coup d'oeil à:
http://css3.bradshawenterprises.com/all/
Ce ne serait pas trop d'effort pour pirater quelque chose à utiliser CSS3.
Regardons de cette façon!
Je ne suis pas sûr du nombre de ces iframes que vous allez charger sur une page ici, mais une chose semble être très certaine; Si vous en avez un trop nombreux, vous aurez assez d'iframes avec suffisamment de vidéos YouTube en cours de chargement.
Ce qui signifie, charges inutiles. L'utilisateur peut ne pas cliquer sur tous ces liens. L'utilisateur peut ne pas regarder toutes ces vidéos.
SO:
Il y a un blaudage inutile des ressources et une consommation inutile de la bande passante de l'utilisateur.
Et, de plus, cela n'est pas évolutif. Considérez, vous avez besoin de 50 de ces liens sur une page. D'ACCORD. Prenez juste 10. Même c'est beaucoup!
Je travaille sur un jsfiddle pour celui-ci. Va postera ici, quand terminé!
Pouvez-vous le reproduire sur jsfiddle?
Semble travailler bien pour moi en chrome: jsfiddle.net/gwlcd/3
En fait, la visualisation de Jivings 'Fiddle sur Win FF 9.x entraîne un peu une animation agitée.
@ Jivings: Ah, j'aurais dû mettre en place un jsfiddle pour commencer. Voici un: jsfiddle.net/gwlcd/8 avec plus de code complet et des liens de YouTube actifs. Toujours agité pour une raison quelconque. Intégrerait l'aide jQuery.
@songdogtech intéressant. Je pense que c'est à faire avec la vidéo. Avez-vous pensé à cacher la vidéo, montrant simplement un espace réservé lorsque les onglets sont ouverts. Et puis quand l'animation a fini, vous le montrerez?
Moi aussi, je vous suggère d'essayer ce que suggéra @jivings.