Javascript 当条件为真时，将Div元素从右向左滑动

我有一个div元素，它是

位置：fixed

，

高度：300px

，

宽度：200px

和

显示：none

。我还有一个文本字段，用于从数据库中过滤数据。当我单击列表中的一个过滤数据时，该数据项将显示在文本字段中。数据过滤过程工作正常，但问题是，当我单击列表中的过滤数据项时，我希望div从右向左滑动，并且在我从文本字段（空字段）中删除该项后，我希望div从左向右滑动。我只想根据条件从右向左和从左向右滑动一个div

HTML

CSS

div#div幻灯片{
高度：300px；
宽度：200px；
位置：固定；
右：30px；
底部：10px；
显示：无；
溢出：隐藏；
}

JS

$（文档）。在（'click'，'li#show list'，函数（）上{
$（“#searchData”）.val（$（this.text（））；
$（“.show data”）.fadeOut（）；
$（“#div幻灯片”）。设置动画({
宽度：“切换”
});
});
$（文档）。在（'单击'，'显示列表'，函数（）上）{
$（“#搜索数据”）.val（“”）；
$（“.show data”）.fadeOut（）；
$（“#div幻灯片”）。设置动画({
宽度：“0”
});
});

---

元素是在db coding部分动态创建的，使用我的JS代码，

div

在我第一次单击过滤数据项时可以完美地滑动，但是当我第二次单击时，它会由于

切换而从左向右滑动（隐藏）。我希望当项目显示在文本字段中时，
div
保持可见，当文本字段中没有数据时，
div
隐藏。
请提供您的代码示例。请回答您的问题？不，没有。我搜索了又搜索，但是所有的例子都是通过点击事件触发的。我需要的是使动画工作的条件。任何帮助请。。。。！