如何在自动完成中制作过渡效果(幻灯片)
how to make transition effects(slide) in 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 通过监听 属性 来工作,并且会在 属性 发生变化时 "animate"。因此,在您的情况下,您需要将过渡添加到 #ac_results. 将 #ac_results 高度设置为 0 , 当它发现结果改变元素的高度时,它应该向下滑动
transition: height 0.5s ease-in-out;
height: 0;
这是一个简单的示例(请注意,它不会自动完成,只是在检测到输入时显示)
自动完成工作正常,但我需要建议菜单中的过渡效果(向下滑动),
我是从这个网站引荐的 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 通过监听 属性 来工作,并且会在 属性 发生变化时 "animate"。因此,在您的情况下,您需要将过渡添加到 #ac_results. 将 #ac_results 高度设置为 0 , 当它发现结果改变元素的高度时,它应该向下滑动
transition: height 0.5s ease-in-out;
height: 0;
这是一个简单的示例(请注意,它不会自动完成,只是在检测到输入时显示)