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

display函数中没有animate()这样的选项，因为display: block和display: none之间没有任何步骤。转换只能使用数值。 看看jquery docs http://api.jquery.com/animate/

使用它：

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