javascript - jQuery Animate 和 CSS 间歇性工作

Question

我正在使用 jQuery/CSS 和 API.AI 构建自定义聊天 UI

当 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; and bottom: 50px 或 bottom: -50px and display: block; 这意味着它根本不显示。 console.log("triggered") 始终有效。

我尝试了没有排队/出队的更基本的变体，但这似乎具有相同的效果。

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

我在这里做错了什么？

Answer 1

尝试在开头加入.stop()函数

当你调用另一个动画太快时它会停止你的动画

这是代码，尝试删除 .stop() 函数，你可以看到区别

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

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

$(document).on("click","#button1",function(){
  hideSuggestions();
});

$(document).on("click","#button2",function(){
  showSuggestions();
});

$(document).on("click","#button3",function(){
  hideSuggestions();
  showSuggestions();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="suggestionOverlay">suggestionOverlay</div>
<button id="button1">hide</button>
<button id="button2">show</button>
<button id="button3">hide/show quickly</button>