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>

jQuery Animate和CSS间歇性地工作

1 个答案: