jQuery .animate function won't work

Question

This is the HTML:

<h1 id="dictionaryTitle">Intrebari frecvente</h1>
<p class="question">QUESTION1</p>
<p class="answer">ANSWER1</p>
<p class="question">QUESTION2</p>
<p class="answer">ANSWER2</p>

This is the JavaScript/jQuery:

    $(document).ready(function() {
  $('.question').on("click", function() {
    if ($(this).next('.answer').css('display') === 'none') {
      $(this).next('.answer').animate({ "display": "block" }, 1000 });
    }
  });
});

The problem in that on click the function does not work - the display of the .answer p does not change.

Any possible solutions?

Answer 1

there is no option like display in the animate() function because there are no steps between display: block and display: none . transitions can only be possible with numeric values. take a look at the jquery docs http://api.jquery.com/animate/

use this:

$(document).ready(function() {
  $('.question').on("click", function() {
    var $answer = $(this).next('.answer');
    if(!$answer.is(':visible')) {
      $answer.fadeIn(1000);
    }
  });
});