Question

自动完成工作正常，但我需要在建议的菜单中进行过渡效果（向下滑动），

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

我试过

＆＃13;

 $(document).ready(function() {
   $("#tag").autocomplete("autocomplete.php", {
     selectFirst: true
   });
 });

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

我在id="tag"和.ac_results上添加了转换属性，但它无法正常工作，请提出任何想法。

Answer 1

通过收听属性来实现转换，并在该属性发生变化时进行“动画处理”。因此，在您的情况下，您需要添加到 #ac_results的转换。将 #ac_results 高度设置为0，并在找到结果时更改该元素的高度向下滑动

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

以下是它的一个简单示例（请注意，它不会执行任何自动完成，只会在检测到输入时显示）

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

如何在自动完成中制作过渡效果（幻灯片）

1 个答案: