jQuery .animate函数不起作用

Question

这是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>

这是JavaScript / jQuery：

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

问题在于单击该功能后无法使用-.answer p的显示不会更改。

任何可能的解决方案？

Answer 1

animate()函数中没有类似于display选项，因为display: block和display: none之间没有步骤。 只能使用数值进行过渡。 看一下jQuery文档http://api.jquery.com/animate/

用这个：

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