正如你所看到的，动画真的很生涩。我希望搜索图标的平滑滑动，以及搜索栏和随机播放图标的平滑淡入淡出。与出现的结果框相同。我已经尝试了动画的各种时序和设置组合，这些问题仍然存在。
代码：
a答案 0 :(得分：1)
您可以使用回调让一个又一个的动画发生。此外，我将一些动画从幻灯片更改为淡入淡出以使其看起来更平滑。拥有太多幻灯片往往会使网页看起来很笨拙。
// jQuery Shortcuts
const search_bar = $('#search_bar');
const search_button = $('#search_button');
const search_query = $('[name=search_query]')[0];
const links = $('#links');
const random = $('#random_button');
// Animations
// activate search on click
search_button.click(show_and_hide);
// reset screen on random click
random.click(hide_and_show);
// activate results window on keypress
search_bar.keypress(function() {
random.slideUp(1000, 'linear');
links.slideDown(1000, 'linear');
});
// if search bar is empty (from deleting) revert back to search icon
search_bar.keyup(function(){
if(search_bar.val().length === 0){
links.slideUp(1000, 'linear');
hide_and_show();
}
});
// function to show the random button and search bar while hiding search icon
function show_and_hide(){
search_button.fadeOut(1000, 'linear', function () {
random.fadeIn(1000, 'linear');
search_bar.slideDown(1000, 'linear');
search_bar.select();
});
}
// hide search bar and display search button
function hide_and_show(){
search_bar.slideUp(1000, 'linear');
random.slideUp(1000, 'linear');
search_button.slideDown(1000, 'linear');
}
// Link generator function for results window
function link_generator(data){
var i = 0,
title = data[1],
description = data[2],
link = data[3];
for(i; i < data[3].length; i++){
var list_link = '<a href="'+link[i]+'">'+title[i]+'</a><br/>';
list_description = list_link+description[i]+'<hr>';
links.append(list_description);
}
}
// Wiki Auto-complete
search_bar.autocomplete({
source: function(query, result) {
$.ajax({
url: "https://en.wikipedia.org/w/api.php",
dataType: "jsonp",
data: {
'action': "opensearch",
'format': "json",
'search': query.term
},
success: function (data) {
links.empty();
link_generator(data);
}
});
}
});body{
background-color: #c4e3f3;
}
hr{
border-color: white;
}
#banner{
background: url("Images/Wikipedia-banner.png");
background-repeat: no-repeat;
background-size: contain;
background-position: center;
width: 100%;
height: 163px;
}
#links{
color: white; !important;
background-color: #0084b4;
border: groove white 3px;
border-radius: 5px;
padding: 10px 10px 10px 10px;
}
#links a:link{
font-size: 1.5em;
color: white;
text-decoration: underline;
}
#links a:visited{
font-size: 1.5em;
text-justify: auto;
color: white;
}
#search_button{
margin-top: 20px;
outline: none;
border: none;
background: none;
}
#random_button{
margin-top: 10px;
outline: none;
border: none;
background: none;
}<html lang="en">
<head>
<!-- META TAGS -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Enable iOS web app formatting -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="translucent black">
<meta name="appl-mobile-web-app-title" content="Vamp Weather">
<!-- iOS web app icon -->
<link href="" rel="apple-touch-icon">
<!-- iOS web app splash screen -->
<link href="" rel="apple-touch-startup-image">
<!-- TAB TITLE -->
<title>Wiki Finder</title>
<!-- TAB ICON -->
<link rel="shortcut icon" href="" type="image/x-icon">
<!-- STYLING -->
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<!-- FONT AWESOME -->
<script src="https://use.fontawesome.com/c60112b331.js"></script>
<!-- FONT -->
<!-- CSS -->
<link href="WikiFinder.css" type="text/css" rel="stylesheet">
</head>
<body>
<div class="container-fluid" style="max-width: 483px">
<div id="banner"></div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4 text-center">
<form>
<input id="search_bar" title="search_bar" type="text" name="search_query" size="30" style="display: none;">
</form>
<button id="search_button" style="display: inline-flex "><i class="fa fa-search fa-4x" aria-hidden="true" style="color:#0084b4"></i></button>
<div class="row">
<div class="col-md-4"></div>
<div class="col-md-4">
<a href="https://en.wikipedia.org/wiki/Special:Random" target="_blank">
<i id="random_button" class="fa fa-random fa-2x" aria-hidden="true" style="display: none; color: #0084b4"></i>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container-fluid" style="margin-top: 10px;">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-6">
<div id="links" style="display: none;"></div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<!-- jQuery UI -->
<script
src="https://code.jquery.com/ui/1.11.3/jquery-ui.min.js"
integrity="sha256-xI/qyl9vpwWFOXz7+x/9WkG5j/SVnSw21viy8fWwbeE="
crossorigin="anonymous">
</script>
<script src="WIkiFinder.js"></script>
</body>
</html>