Click Event Function Disabled

[silviascript]

https://github.com/siltastic/trivia-game/blob/master/js/main.js#L60-L97

After exploring with adding and removing classes through jQuery, I was able to achieve half of my goal. My goal was to have my trivia questions slide in from the right, then slide to the left and disappear when the user clicked on an answer. I also wanted to remove the trivia questions in my html to be replaced with the next question (it works). Unfortunately, I broke my click event function and only half my animation is working. The function won't loop through my correct answers array after the first question and won't visibly show animating to the left. I've tried using a ".delay()"; which helped to show the animation, but created an issue. I refactored my code and solved many minor issues, but the main one was my click event function.

// Create an array of all the correct answers.
var correctAnswers = ["De Stijl", "Jacque-Louis David", "The Napoleonic Wars"];

// Add an event listener to all <li> tags.
$(".choice").click(function() {
  console.log("this =", this);

  $(".trivia-container").removeClass("fade-in");
  $(".trivia-container").addClass("fade-out").remove();

  // Match answers to the individual <li> tags.
  var userChoice = $(this).text();
  console.log(userChoice);

  // Loop through all the answers in the "correctAnswers" array.
  for (var i = 0; i < correctAnswers.length; i++) {

    // If the answer is correct ...
    if (correctAnswers[i] === userChoice) {
      console.log("Answer is correct!");
      // Append the "correct" class.

      // Add 1 point to each correct answer.
      $("#trivia-score").html(function(i, val) {
        return val * 1 + 1;
        console.log("Added 1pt.");
      }); // Closes "trivia-score"
    }; // Closes "if" statement
  }; // Closes "correctAnswers" 

  index++;
  createQuestion();

}); // Closes ".click"

[jshawl]

I think it's because your animation takes 1 second to complete - https://github.com/siltastic/trivia-game/blob/f4061deed77cfd28f5f50e9ccb7e1c91a7b01421/css/styles.css#L165

Try using setTimeout or listening for the animation's end before removing the class - http://blog.teamtreehouse.com/using-jquery-to-detect-when-css3-animations-and-transitions-end

[adambray]

Closing for now since I'm pretty sure Jesse's suggestion is correct, but @siltastic, we can pair on this during part of our one-on-one today if you'd like.