L'interruption de l'entrée de la souris provoque un clic en boucle

Question

J'ai quelques petites divs qui, lorsque l'on clique dessus, affichent un plus grand div qui se superpose à tout - un peu comme une boîte à lumière. Afin de masquer le grande division Je clique dessus (il n'y a pas de lien "fermer ceci").

Voici le code de clic :

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeIn(500);
                    $('.compositos_lightboxBackground').fadeIn(500);
                    // Second click - draw back
                    $(this).on('click', function(){
                        $('.compositos_DBitem_lightbox', this).fadeOut(500);
                        $('.compositos_lightboxBackground').fadeOut(500);
                    });
                });
});

En .compositos_lightboxBackground est la div de recouvrement de l'arrière-plan et la div .compositos_DBitem_lightbox sont les grandes divs .

Le problème est que, après avoir cliqué sur le bouton grande division (lorsqu'elle est affichée), elle s'efface et revient - si vous ne laissez pas de grandes divisions domaine. Si je clique dessus et que je retire rapidement la souris, cela fonctionne.

Qu'est-ce qui ne va pas ?

FIDDLE

Pedro

Answer 1

Il est préférable d'utiliser fadeToggle parce qu'à l'heure actuelle, vous liez de façon répétée des fonctions supplémentaires à l'élément click événement.

// First click - draw in
$('.compositos_DBitem').on('click', function(){
    // Some stuff going on here...
                function(){
                    // Animate the lightbox elements
                    $('.compositos_DBitem_lightbox', this).fadeToggle(500);
                    $('.compositos_lightboxBackground').fadeToggle(500);
                });
});

fadeToggle fait exactement ce que vous cherchiez à faire avec votre code précédent, mais vous permet de vous lier uniquement à l'élément click une fois.

Auparavant, votre code liait le fondu enchaîné à l'événement click, et il s'exécutait immédiatement lorsque l'on cliquait. Il en va de même pour l'autre fonction (l'animation) que vous aviez précédemment liée à l'événement click. L'animation exécuterait alors son callback lorsqu'elle se terminerait... ce qui afficherait à nouveau les divs 'lightbox'.