我希望在 ajax 调用完成后立即获得一个动画旋钮。我得到一个数字,旋钮应该progress
到没有刷新。所以我想要的是:Ajax请求是成功的 - >将数字发送到旋钮功能 - >旋钮填满。
代码:
..
success: function(data) {
knobload(data);
}
..
function knobLoad(data) {
$('.knob').each(function () {
var $this = $(this);
$this.knob({
});
$({
value: 0
}).animate({
value: data
}, {
duration: 2000,
easing: 'swing',
step: function () {
$this.val(Math.ceil(this.value)).trigger('change');
}
})
});
}
</script>
<input class="knob animated" value="0" readonly data-width="80%">
答案 0 :(得分:0)
通过在ajax请求的文件中添加旋钮结束,然后显示它。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function() {
$('#time_search').bind('submit', function() {
var origin = $('#origin').val();
var destination = $('#destination').val();
alert(origin);
$.ajax({
type: "POST",
url: "search_ODtime.php",
data: 'origin=' + origin + '&destination=' + destination,
success: function(data) {
$('#search_results').html(data);
}
});
});
});
</script>
</head>
<fieldset style="font-size:11pt; opacity: 1; color: white;">
<form id="time_search">
Orinig:
<input name="origin" id="origin" type="number" value="1" min="1" max="97">
<br>
Destination:
<input name="destination" id="destination" type="number" value="1" min="1" max="97">
<br>
<input type="submit" value="Get travel time" name="submit" id="submit" style="border-radius: 5px; display: block; margin: 10px auto 10px 0;">
</form>
Travel time:
<div id="search_results">
</div>
</fieldset>
</body>
</html>
ajax文件:
$.ajax({
url: 'ajax.php',
data: {
id: id
},
success: function(data) {
$('#knob').html(data);
}
});