Wikipedia Viewer jQuery loop animation issue

Wikipedia Viewer jQuery loop animation issue
0.0 0

#1

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!

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

CSS

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

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

jQuery

$(document).ready(function(){
  $('.animation').hide();
  $('#submit').click(function(){
  var search = $('#search-field').val();

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

  else {
    //clear old results
    $('ul').empty();
    $('.error-message').empty();
    //get search results
    $.ajax({
      ...
    });

    $('.animation').show();
  } 
  });

});

#2

In this case: http://codepen.io/NeckersBOX/pen/apBoGv the code works. Are you sure you haven’t any error message in console?


#3

Hi!

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!

Best,
J