Wikipedia Viewer jQuery loop animation issue

Greetings, Free Code Camp!

I am currently working on the Wikipedia Viewer project and got stuck on a jQuery question.

In theory it should work like this: Upon click - if the search field is empty, displays error message - else append search result to the page, and display an animation which prompts the users to scroll down to check the results

I wrote the animation in CSS and it’s working fine without JS/jQuery. To toggle on/off I first hide the HTML element and once the function enters the else statement I wrote a .show(), but in this case the loop of the animation is interrupted (it only runs once). Could anyone explain to me why this is happening/how to modify the code?

Here are the relevant HTML, CSS and JS/jQuery code. Much thanks in advance for any help/suggestions!

<div class="animation"><p>Scroll down for results</p></div>


@-webkit-keyframes results {
    top: 160px;
    opacity: 1;  

    top: 180px;
    opacity: 0;

.animation {
  -webkit-animation: results 1.5s linear infinite;
      -moz-animation: results 1.5s linear infinite;
           -o-animation: results 1.5s linear infinite;
                animation: results 1.5s linear infinite;
    position: relative;
    text-align: center;
    top: 160px;


  var search = $('#search-field').val();

  //error message when the entry is empty
  if (search == ""){
    $('.main-body').append('<p class="error-message">Oops - did you forget to put in something?</p>');

  else {
    //clear old results
    //get search results



In this case: the code works. Are you sure you haven’t any error message in console?

1 Like


I figured out earlier that the code was working the whole time - I’ve just been positioning it at the wrong place. Thank you though!