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