Lisser cette jQuery activer / désactiver l'animation?

L'animation produite par ma fonction jQuery est fragile, et j'ai été en regardant à travers différentes solutions, telles que l'ajout de jquery.l'accélération, mais pas de chance. Le problème est le iframes dans chaque div?

Des idées sur la façon de lisser l'animation? Est mon de base de la fonction de bascule de la meilleure façon?

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

La base de balisage est ci-dessous, et est répété de nombreuses fois sur la page (avec des blocs de texte entre chaque "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>

Et la fonction:

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

Pouvez-vous reproduire sur jsfiddle?
Semble bien fonctionner pour moi dans Chrome: jsfiddle.net/gwLcD/3
En fait, la visualisation Jivings' violon sur win ff 9.x est un peu saccadée de l'animation.
Ah, je devrais avons mis en place un jsfiddle pour commencer. En voici un: jsfiddle.net/gwLcD/8 avec un code plus complet et active les liens de youtube. Toujours instable pour une raison quelconque. Serait l'intégration de jquery.l'assouplissement de l'aide?
Intéressant. Je pense que sa à faire avec la vidéo. Avez-vous pensé sur le masquage de la vidéo, il suffit de montrer un espace réservé lorsque les onglets sont ouverts. Et puis lorsque l'animation est terminée, vous avez le montrer?

OriginalL'auteur markratledge | 2012-01-26

Andrew solution est correcte, mais je voudrais quand même mettre le css comme ceci (si javascript est désactivé):
.videoblock{largeur:560 px; height: 315px; overflow:hidden}

et ajouter les simultanée de l'animation:

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

Voici le lien pour la finale: http://jsfiddle.net/gwLcD/21/

Merci! Fonctionne très bien et permet à un seul div ouvrir à tout moment, comme j'ai besoin.

OriginalL'auteur Alex Okrushko

5

check this out - http://jsfiddle.net/vbXVR/.

il utilise jquery
```
$(document).ready(function(){
    $(".entry-title").click(function() {
        $(".videoblock").animate({height: "315"}, 1500);
    });
});
```
Personnellement, j'ai trouver bizarre le comportement de jquerys "automatisé" basculer le, spectacle, fade, ... des animations concernant les "unintatiated" éléments. J'ai trop de, on peut dire que, souvent, l'animation d'une propriété à la main travaillé pour résoudre le problème, tout comme Andrew est en train de proposer.
+1 de nice, la solution la plus simple.
J'ai ajouté un jsfiddle: jsfiddle.net/gwLcD/8 un peu complexe, c'est que j'ai la fonction définie pour permettre seulement une div à la fois.

OriginalL'auteur theliberalsurfer
4

Regardons cela de cette façon!

Je ne suis pas sûr de savoir comment beaucoup de ces iframes vous allez charger sur une page ici, mais une chose semble certaine, si vous en avez trop, vous aurez suffisamment de cadres iframe avec assez de vidéos sur youtube pour le chargement.

Ce qui signifie, les charges inutiles. L'utilisateur ne pourra pas cliquer sur tous ces liens. L'utilisateur ne peut pas regarder toutes ces vidéos.

Donc:
1. Il est inutile de faire gonfler les ressources, et inutile de consommation de l'utilisateur de la bande passante.
2. Et, d'ailleurs, ce n'est pas évolutif. Considérez, vous avez besoin de 50 de ces liens sur une page. OK. Prendre seulement 10. Même c'est plutôt pas mal!
Je travaille un jsfiddle pour celui-ci. Vais le poster ici, lors de la fait!

Il u go: jsfiddle.net/GGS4N

OriginalL'auteur Mitesh Ashar
1

Quel navigateur êtes-vous principalement gunning pour? Si c'est un des navigateurs webkit ou FireFox, vous pouvez prendre avantage de l'accélération matérielle transitions CSS3 avec jquery secours.

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

Je ne pense pas que jQuery easing utilise actuellement des transitions CSS3 comme première option, mais corrigez-moi si je me trompe.

Prendre un coup d'oeil à:
http://css3.bradshawenterprises.com/all/

Il ne serait pas trop d'efforts à tous pour pirater quelque chose à l'aide de CSS3.

OriginalL'auteur backdesk
1

Une raison vous ne souhaitez pas utiliser un accordéon plugin directement? La bibliothèque jQuery UI doit prendre soin de cette très bien.

Aussi, dans le cas où cela ne fonctionne pas comme prévu, vous pouvez essayer les animations css3? Vous pouvez obtenir un résumé des animations CSS3 ici: http://titansturf.in/2012/01/12/using-css3-transitions/

Vous devrez créer deux classes, l'une avec div-hide, qui a height: 0 et une avec div-show qui a les height ensemble. Chaque fois que vous souhaitez activer, il suffit de changer la classe à l'aide de jQuery.

De l'OMI, à l'aide de CSS3 serait une bonne options au cas où votre public cible utilise les navigateurs modernes. Si non, vous pouvez utiliser Modernizr pour changer la façon dont les choses fonctionnent selon le type de navigateur utilisé.

OriginalL'auteur Neeraj

Vous devez vous connecter pour publier un commentaire.