将动画滑动到扩展的自动完成小部件不起作用

Question

我正在使用Gary's for slow lists的扩展自动完成小部件，而且效果非常好。

但我的旧版慢版本以幻灯片效果运行。当我尝试使用具有幻灯片效果的新窗口小部件时，列表显示在页面左侧而不是右侧的选择框下，并且在再次单击搜索按钮时不会消失。有人可以提出解决方案吗？

我的代码：

    function showList(){
        if (!$.ui) // needed for $ conflict between jquery and jquery-ui for .effect
        {
            $.noConflict( true );
        }
        if ($("div#searchInput").css("display") === "none"){
            $("button#searchButton").click();
            $("div#searchInput").css({"display": "block"})
                             .effect( "slide", {direction:"right"}, 500 ); 
        }
        else {
            $("div#searchInput").hide( "slide", {direction:"right"}, 500 );
        }   
    }

#searchIcon {
    height: 1em;
    width: 1em;
    float: right;
    z-index:1;
    position: absolute;
    right:0px;
    margin-right: 25px;
    background: #c4cdd4;
}
#searchDiv {
    width: 175px; 
    float: right;
    margin-right: 40px;
}
#searchInput {
    float: left;
    position: relative;
    display:none;
}
#searchSelect {
    width: 170px; 
    background: #c4cdd4;
}
#searchButton {
    display:none;
}
input {
    width: 174px;
    background: white;
    /*background: transparent !important;*/
}
ul#ui-id-1{
    /*background: transparent !important;*/
    background-color: #c4cdd4;
    width: 170px;
}
a {
    font-family: Arial, sans-serif;
    font-size: 16px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>

<div id="searchIcon">
  <img src="/file/images/search_icon.png" alt="Search" onclick="showList()">
</div>
<div id="searchDiv">    
  <div id="searchInput">
    <select id="searchSelect" onchange="searchWidget()"></select>
  </div>
</div>