Javascript jQuery动画和CSS间歇性工作

我正在用jQuery/CSS和API.AI构建一个自定义聊天界面

当API.AI在API调用中返回聊天建议时，会显示一个覆盖。我有这两个函数控制覆盖在页面上的可见性

function hideSuggestions(){
    $("#suggestionOverlay").animate({"bottom":"-50px","opacity":"0"},function(){
        $("#suggestionOverlay").css({"display":"none"});
    });
}

function showSuggestions(){
    console.log("triggered");
    $("#suggestionOverlay").css({"display":"block"}).queue(function() {
        $("#suggestionOverlay").animate({"bottom":"50px","opacity":"1"});
       $(this).dequeue();
    });
} 

不过，

showSuggestions（）

函数的工作非常间歇。有时它可以正确显示，但有时覆盖有属性

display:none；和底部：50px

或

底部：-50px和显示：块这意味着它根本不显示。不过，
console.log（“已触发”）
始终有效

我尝试了更基本的变体，但没有排队/退队，但这似乎有同样的效果

showSuggestions（）
函数出现在以下代码块中：

function send()
{
    var url = "api.php?q="+encodeURI($("#q").val(););
    hideSuggestions();
    $.getJSON(url, function(data){
        if(data['suggestions'].length != 0)
        {
            var suggestionsHTML = "";
            for(var i = 0; i < data['suggestions'].length; i++)
            {
                suggestionsHTML = suggestionsHTML+'<div class="suggestion">'+data['suggestions'][i]+'</div>';
            }
            $("#suggestionsParent").html(suggestionsHTML);
            showSuggestions();
        }
    });
}

函数send（）
{
var url=“api.php？q=“+encodeURI（$（“#q”）.val（））；
隐藏建议（）；
$.getJSON（url、函数（数据）{
如果（数据['suggestions'].length！=0）
{
var suggestionsHTML=“”；
对于（var i=0；i

我做错了什么？
尝试在开始时添加
.stop（）
函数

如果调用另一个动画太快，则会停止动画

下面是代码，尝试删除
.stop（）
函数，您可以看到区别


函数隐藏建议（）{
$（“#suggestionOverlay”）.stop（）.animate（{“bottom”：“-50px”，“opacity”：“0”}，function（）{
$（“#suggestionOverlay”）.css（{“display”：“none”}）；
});
}
函数showSuggestions（）{
$（“#suggestionOverlay”）.stop（）.css（{“display”：“block”}）.queue（函数（）{
$（“#suggestionOverlay”）。动画（{“底部”：“50px”，“不透明度”：“1”）；
$（this.dequeue（）；
});
} 
$（文档）。在（“单击”，“按钮1”，函数（）上）{
隐藏建议（）；
});
$（文档）。在（“单击”，“按钮2”，函数（）上）{
showSuggestions（）；
});
$（文档）。在（“单击”，“按钮3”，函数（）上）{
隐藏建议（）；
showSuggestions（）；
});

暗示过度
隐藏
显示
快速隐藏/显示
谢谢！这似乎就是问题所在。