jquery - 基本的toggle()从下到上滑动问题

Question

这段代码确实有效，但并不完全按照我期望的方式。

“.socialSlide”是一个位于页面底部的 div，具有突出的 anchor “选项卡”。 div 的其余部分隐藏在底部。这个想法是通过点击或悬停该链接时的动画来显示或隐藏 div。

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

并向该 anchor 添加切换功能

    /*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'});

发生了什么:

1. 主播收到第一个点击时动画命令。很好。

2. 再次点击 anchor 链接应该像以前一样隐藏 div，但是它不会发生。至少会上涨其他 70 像素。

3. 第三次点击 anchor 似乎执行第二个function() 正确，然后首先，从那里开始。

那么，第 2 步可能会发生什么？我错过了什么吗？如果这听起来太基础了，我深表歉意。提前致谢。

Answer 1

第二步应该隐藏div？那么底部应该有负值:

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

但我不会用它来隐藏显示项目，而是用另一个 DIV 包装内容并滑动切换它，例如 this .