javascript - 如何在自动完成中制作过渡效果(幻灯片)

标签 javascript jquery html css autocomplete

自动完成工作正常,但我需要建议菜单中的过渡效果(向下滑动),

我从这个网站引用 http://tutsforweb.blogspot.in/2012/05/auto-complete-text-box-with-php-jquery.html

我试过了

 $(document).ready(function() {
   $("#tag").autocomplete("autocomplete.php", {
     selectFirst: true
   });
 });
.ac_results {
  background-color: white;
  border: 1px solid #5c5c5c;
  left: 174.5px !important;
  overflow: hidden;
  padding: 0;
  width: 247px !important;
  z-index: 99999;
}
.ac_results ul {
  width: 100%;
  list-style-position: outside;
  list-style: none;
  padding: 0;
  margin: 0;
}
.ac_results li {
  margin: 0px;
  padding: 2px 5px;
  cursor: default;
  display: block;
  font-family: "armataregular";
  font-size: 12px;
  line-height: 16px;
  overflow: hidden;
}
.ac_loading {
  background: white url('indicator.gif') right center no-repeat;
}
.ac_odd {
  background-color: #eee;
}
.ac_over {
  background-color: #ccc;
  color: black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="listone">
  <input type="text" placeholder="Enter Keyword" id="tag">
</div>

我在 id="tag".ac_results 上添加了过渡属性,但它不起作用, 请提出任何想法。

最佳答案

Transitions 通过监听一个属性来工作,并在该属性发生变化时“动画化”。因此,在您的情况下,您需要添加到 #ac_results 的过渡。#ac_results 高度设置为 0,当它找到结果时会更改该元素的高度,它应该向下滑动

transition: height 0.5s ease-in-out;
height: 0;

这是一个简单的例子(注意它不会自动完成,只是在检测到输入时显示)

http://jsfiddle.net/schwqa7k/1/

关于javascript - 如何在自动完成中制作过渡效果(幻灯片),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28038584/

相关文章:

jQuery .inArray 问题

javascript - 使用键获取对象数组中的对象

javascript - 使用 Twitter API 检查好友关系的存在

javascript - 使用 javascript 从特定站点删除 cookie 不起作用

javascript - 无论如何要传递 jquery deferred $.when 数组?

jquery - Datatable 中的单选按钮无法在 Safari/Firefox 中呈现

javascript - Angularjs:使用 Angular Directive(指令)修改 Angular 表达式提供的内部html内容

javascript - jQuery 屏蔽输入而不改变值

javascript - 使用 Object-Fit 时的悬停缩放效果 : Cover

javascript - 查找具有特定 css 类的元素