Pourquoi mon jQuery animation ne fonctionne pas?

J'utilise jQuery animate tout le temps, mais il est l'échec pour une raison cette fois. Il va travailler, j'essaie de cibler '$(this).animer " après la closeBtn cliquez sur, et il va fonctionner, un peu.

voici une partie de mon code html(le relivant pièces, et oui, j'ai appelé la bibliothèque jQuery)

<div id='lightBox' style="opacity:0;">
    <div id='closeBtn'>
    </div>
    <div id='lightBoxContent'>
    </div><!--lightBoxContent-->
</div><!--lightBox-->

voici mon jquery

$(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });


        $('#closeBtn').click(function()
        {
            //alert('click');
            $('#lightBox').animate({
                opacity:'0'
            }, 300, function() {
                //alert('first animation complete');
                $('#lightBox').animate({
                    height:'0px'
                }, 300, function() {
                    //alert('second animation complete');
                });
            });
        });
    });
});

et mon css(c'est pas vraiment une obligation, mais je l'ai inclus pour mesure de sécurité

#lightBox {
    width:780px;
    background-color:white;
    position:fixed;
    margin-left:-400px;
    margin-top:-300px;
    left:50%;
    top:50%;
    z-index:9999;
    -webkit-box-shadow:  0px 0px 200px 50px ;
    box-shadow:  0px 0px 200px 50px ;
    padding:20px;
}
Vous utilisé uniquement ceux de l'ID d'une fois, non ?
Avez-vous essayé de la console.log("test"); dans les différentes étapes de voir ce que la ligne de votre code de rupture? ou avez-vous pris un coup d'oeil à votre console pour voir si il y a des erreurs?
Pour des choses comme celles-ci, vous devez également créer un jsfiddle. Rend notre vie plus facile.

OriginalL'auteur Matt Ryan | 2013-04-16

  1. 4

    Vous souhaitez déplacer $('#closeBtn').click(function() à l'extérieur de la cliquez sur la (les) fonction appelée lors de la #quoteBtn est sur. Parce qu'il ne sera jamais appelé, car vous ne pouvez pas cliquer à l'intérieur d'un clic.

    Voici à quoi il devrait ressembler à:

    $(document).ready(function()
{ 
    $('#quoteBtn').click(function()
    {
        $('#lightBox').animate({
            opacity:'1',
            height:'560px'
        }, 300, function() {
            $('#lightBoxContent').html(output);
        });    
    });

    $('#closeBtn').click(function()
    {
        //alert('click');
        $('#lightBox').animate({
            opacity:'0'
        }, 300, function() {
            //alert('first animation complete');
            $('#lightBox').animate({
                height:'0px'
            }, 300, function() {
                //alert('second animation complete');
            });
        });
    });

});

    Mise à jour: Ok... voici la partie 2.

    Vous souhaitez définir $('#lightBox').animate({ à $('#lightBox').stop().animate({ qui continuera ensuite la "proximité" de l'animation.

    Je ne peux pas croire que j'ai plus regardé que! Mais ça ne marche toujours pas.
    Ce n'est pas encore de travail?
    Ok pense que je l'ai eu. Mise à jour de ma réponse
    C'est un gestionnaire d'événements, vous n'avez pas besoin de cliquer à l'intérieur du clic, il lie l'événement sur clic. Encore un bon point, en joignant les gestionnaires d'événements à l'intérieur des gestionnaires d'événement est généralement pas une bonne idée.
    Je ne peux pas parler d'expérience sur une "mauvaise idée". J'ai presque toujours .stop() sur toute sorte d'animation, parce que dans le passé, j'ai couru dans de nombreux problèmes de sans de l'utiliser. Mais son utilisation n'a jamais vraiment foiré mon code.

    OriginalL'auteur doitlikejustin

  2. 0

    Corrigez-moi si je me trompe, mais essayez de changer ce:

    position: fixed;

    à position: absolute; ou position: relative;

    position:fixed; me rend un peu nerveux. Je sais que si vous ne définissez pas un élément à la position:relative ou position:absolute dans le css, jQuery ne pas l'animer. Juste ne sais pas pour la position:fixed.
    J'ai utilisé fixe parce que je veux toujours le panneau de focus, de sorte que les utilisateurs peuvent faire défiler loin d'elle, c'est une sorte de lightbox.J'ai utilisé cette méthode avant de, et fixe fonctionne avec jquery animate.Oui, tous les Id ne sont utilisés qu'une fois dans tout le document.J'utilise alert() pour des fins de test.

    OriginalL'auteur Shazboticus S Shazbot