Problème de bascule bascule basique() de bas en haut

Question

Ce code fonctionne réellement, mais pas exactement de la manière attendue. ".socialSlide" est un ensemble de div au bas de la page qui comporte un "onglet" d'ancrage qui dépasse. Le reste de la div est caché en bas. L'idée est d'avoir le div montrer ou cacher via l'animation soit sur le clic ou le survol de ce lien.

// Adding the anchor link and hiding the rest of the div 
$('.socialSlide').prepend('<a href="#" class="ssOpen">Share</a>').css('bottom', '-77px'); 

et en ajoutant la fonction de bascule à ce point d'ancrage

/*add socialSlide toggle*/ 
$('.socialSlide a.ssOpen').toggle(function() { 
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900, easing: 'easeInOutQuint'}); 
    }, function() {  
    $(this).parent().stop().animate({"bottom": "70px"},{ queue:false, duration:900, easing: 'easeInOutQuint'}); 

Qu'est-ce qui se passe:

1. L'ancre reçoit la première commande de Animer en cliquant dessus. Bien. Un autre clic sur le lien d'ancrage devrait cacher le div comme avant, mais il ne se produit pas. Il monte au moins autre 70 px.

2. Un troisième clic sur l'ancre semble exécuter la deuxième fonction () correctement, puis la d'abord, à partir de là.

Alors, que se passe-t-il à l'étape 2? Est-ce que je manque quelque chose? Toutes mes excuses si cela semble trop basique. Merci d'avance.

Answer 1

La deuxième étape doit masquer la div? puis du bas doit avoir une valeur négative:

$('.socialSlide a.ssOpen').toggle(function() { 
    $(this).parent().stop().animate({"bottom": "-25px"},{ queue:false, duration:900}); 
}, function() {  
    $(this).parent().stop().animate({"bottom": "-70px"},{ queue:false, duration:900}); 
}); 

Mais je ne vais pas l'utiliser pour masquer les éléments montrent plutôt le contenu envelopper avec un autre DIV et slideToggle il, comme this.