動畫生澀。我如何平滑他們？

正如你所看到的動畫真的很生澀。我需要使用搜索欄和隨機播放圖標的平滑淡入淡出來順利滑動搜索圖標。結果框出現時也是如此。我嘗試過各種動畫的時間和設置組合，這些問題依然存在。

代碼：

// 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'); 
       random.slideDown(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); 
       } 

      }); 
     } 

    });

來源

2017-04-16 vampiire

你應該發表一個http://jsfiddle.net – Neil

我codepen鏈接更新是可以嗎？ – vampiire

我認爲問題在於動畫在第一個動畫完成之前就開始了，所以它們重疊並且結結實實。有任何解決這個問題的方法嗎？ – vampiire

您可以使用回叫，使一個又一個動畫發生。此外，我將幻燈片中的一些動畫更改爲淡入淡出，以使其看起來更流暢。擁有太多幻燈片往往會使網頁看起來很瘋狂。

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

來源

2017-04-16 22:34:00 Neil

啊方式更好的人非常感謝你。所以這裏的關鍵只是改變它們中的一些來淡入/淡出，而不是讓它們全部滑動？ – vampiire

動畫生澀。我如何平滑他們？

回答

相關問題