jQuery slide est nerveux

Question

J'ai essayé de glisser dans et hors d'un DIV avec la fonction de bascule de jQuery, mais le résultat est toujours nerveux au début et/ou fin de l'animation. Voici le code js que j'utilise:

$(document).ready(function(){
    $('#link1').click(
        function() {
            $('#note_1').parent().slideToggle(5000);
        }
);

Et le code HTML:

<div class="notice">
    <p>Here's some text. And more text. <span id="link1">Test1</span></p>
    <div class="wrapper">
        <div id="note_1">
            <p>Some content</p>
            <p>More blalba</p>
        </div>
    </div>
</div>

Vous pouvez également voir l'exemple complet ici: jQuery Slide test

Habituellement, j'utilise Mootools et je peux le faire glisser sans aucun problème avec elle. Mais je commence un nouveau projet dans Django et la plupart des app dans Django utiliser jQuery. Donc, pour que et après la lecture de ce jQuery vs Mootools j'ai décidé que ce sera une bonne occasion pour commencer à l'aide de jQuery. Donc, mon premier souci était de glisser cette DIV. Et ça ne fonctionne pas correctement.

Je n'ai plus de recherche et j'ai trouvé que c'est un vieux bug dans jQuery, avec de la marge et le remplissage appliquée à la DIV. La solution consiste à envelopper la DIV dans un autre DIV. Il n'a pas de résoudre la chose dans mon cas.

La recherche, j'ai trouvé ce post Slidedown animation jumprevisited. Il fixer un saut à une fin, mais pas à l'autre (Test2 en jQuery Slide test).

Sur un Débordement de Pile, j'ai trouvé ce jQuery IE saccadé de l'animation de diapositives. Dans les commentaires j'ai vu que le problème est avec la balise P à l'intérieur de la DIV. Si je remplace les balises P avec des balises DIV qui résout le problème mais ce n'est pas une bonne solution.

Enfin, j'ai trouvé cela Bizarre jQuery comportement de la diapositive. Le lisant, j'ai compris que le problème résolu par le passage de P balise DIV est avec les marges de la P (non présent dans la DIV) et de la réduction des marges entre les éléments. Donc, si je switch les marges pour les rembourrages il résoudre le problème. Mais je lâche l'effondrement comportement de marges, l'effondrement des que je veux.

Honnêtement, je peux dire que ma première expérience avec jQuery n'est pas vraiment bon. Si je veux utiliser un simple effet en jQuery que j'ai de ne pas utiliser la fonction propre (slideToggle) mais au lieu d'utiliser certaines faites à la main le code ET envelopper la DIV dans un autre DIV commutateur ET de marges à des remplissages, de jouer ma mise en page.

Ai-je raté une solution plus simple ?

Comme krdluzni suggèrent, j'ai essayé d'écrire comme script personnalisé avec l'animer méthode. Voici mon code:

var $div = $('#note_2').parent();
var height = $div.height();

$('#link2').click(
    function () {
        if ( $div.height() > 0 ) {
            $div.animate({ height: 0 }, { duration: 5000 }).css('overflow', 'hidden');
        } else {
            $div.animate({ height : height }, { duration: 5000 });
        }

        return false;
});

Mais cela ne fonctionne pas, soit parce jQuery toujours régler le dépassement de visible à la fin de l'animation. Si la DIV est reapearing à la fin de l'animation, mais en surimpression sur le reste du contenu.

J'ai essayé aussi avec de l'INTERFACE utilisateur.Slide (et l'Échelle et la Taille). Il fonctionne, mais le contenu en dessous de la DIV ne se déplace pas avec l'animation. Il ne sauter à la fin/début de l'animation pour combler l'écart. Je n'en veux pas.

Mise à JOUR:

Une partie de la solution est de définir la hauteur de la DIV conteneur dynamiquement avant quoi que ce soit. Ce résoudre un saut. Mais pas la seule cause par l'effondrement de la marge. Voici le code:

var parent_div = $("#note_1").parent();
parent_div.css("height", parent_div.height()+"px");
parent_div.hide();

DEUXIÈME MISE À JOUR:

Vous pouvez voir le bug sur le jQuery propre site à cette page (Exemple B): Tutoriels:des Exemples Vivants de jQuery

TROISIÈME MISE À JOUR:

Essayé avec jQuery 1.4, pas plus de chance :-(

Answer 1

J'ai trouvé que ce qui fonctionne toujours est la définition d'une bordure invisible de 1px:

border: 1px solid transparent;

Pas besoin de fixer la largeur ou la hauteur ou quoi que ce soit et l'animation ne saute pas. Hourra!

Answer 2

La solution est que la largeur de la glisse doit être réglée en pixels. N'utilisez pas 'auto' ni '%'. Et vous aurez un bon résultat !!! Le problème réside dans les éléments en ligne qui se trouvent dans un div glissant. Exemple: regardez ici

mais s'ils ont la largeur en px, la hauteur sera identique. Essayez-le Attendre les commentaires

Answer 3

J'ai rencontré ce problème aujourd'hui. J'ai remarqué cependant que la désactivation de tous les CSS fixe le problème. Aussi, je savais que ça marchait bien avant il doit donc y avoir eu des changements récents qui ont causé le problème.

Il s'est avéré que j'ai utilisé des transitions en CSS à l'aise dans et hors de la plane.

Une fois ces transitions ont été retirés des éléments que j'étais en ajoutant que tout allait bien.

Donc, si vous avez le même problème, il suffit d'ajouter ces lignes pour les éléments que vous êtes en train d'ajouter:

-webkit-transition: none;
-moz-transition: none;
-o-transition: none;
-ms-transition: none;
transition: none;

(Je pourrais avoir abusé des transitions un peu, non seulement en ajoutant aux éléments, je veux avoir des transitions, mais de les utiliser pour l'ensemble du site web.)

Answer 4

Essayez de supprimer toutes les marges CSS de tous les éléments. L'animation saccadée provient généralement de marges non prises en compte par le framework d'animation.

Answer 5

Je trouve que animate () est le moyen le plus fiable d’animer quoi que ce soit dans jQuery (au moins sur plusieurs navigateurs).

Cela encapsule dynamiquement le contenu dans un div, puis anime la hauteur de cet emballage en utilisant la hauteur de son contenu interne.

http://jsfiddle.net/BmWjy/13/

 $('a').click(function(event) {
        event.preventDefault();
        xToggleHeight($(this).next());
});

//For each collapsible element.
$('.collapsible').each(function() {
        //Wrap a div around and set to hidden.
        $(this).wrap('<div style="height:0;overflow:hidden;visibility:hidden;"/>');
});

function xToggleHeight(el){
        //Get the height of the content including any margins.
        var contentHeight = el.children('.collapsible').outerHeight(true);
        //If the element is currently expanded.
        if(el.hasClass("expanded")){
                //Collapse
                el.removeClass("expanded")
                        .stop().animate({height:0},5000,
                        function(){
                                //on collapse complete
                                //Set to hidden so content is invisible.
                                $(this).css({'overflow':'hidden', 'visibility':'hidden'});
                        }
                );
        }else{
                //Expand
                el.addClass("expanded").css({'overflow':'', 'visibility':'visible'})
                        .stop().animate({height: contentHeight},5000,
                        function(){
                                //on expanded complete
                                //Set height to auto incase browser/content is resized afterwards.
                                $(this).css('height','');
                        }
                );
        }
}