Question

正如你所看到的，动画真的很生涩。我希望搜索图标的平滑滑动，以及搜索栏和随机播放图标的平滑淡入淡出。与出现的结果框相同。我已经尝试了动画的各种时序和设置组合，这些问题仍然存在。

代码：

Answer 1

您可以使用回调让一个又一个的动画发生。此外，我将一些动画从幻灯片更改为淡入淡出以使其看起来更平滑。拥有太多幻灯片往往会使网页看起来很笨拙。

＆＃13;

        // 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);
                    }

                });
            }

        });

＆＃13;

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

＆＃13;

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

＆＃13;

动画是生涩的。我怎么能抚平它们呢？

1 个答案: