隐藏一个DIV并在成功提交表单时显示另一个DIV

Question

我正在使用以下代码段来发布数据并提交表单。我有一个id = form的div和一个id = thankyou的div。我正在使用$（'＃thankyou'）。hide（）;隐藏谢谢你div。成功提交表单后，我需要隐藏表单div并显示谢谢div。一切正常，即提交表格并将数据存储在数据库中但由于某种原因隐藏和显示两个div不起作用。

非常感谢任何帮助。

<script>
  $('#thankyou').hide();
  $('.submit-form').submit(function(e) {
    e.preventDefault();
    $.ajax({
      type: 'POST',
      url: 'http://ecaddy.co.za/timer/shared/html/entry_form.php',
      data: $(this).serialize(),
      success: function(data, status) {
        // This is how I'm trying to hide / show the div's.
        $('#form').hide();
        $('#thankyou').show();
        console.log(data)
      },
      error: function(xhr, status, error) {
        console.log(xhr.responseText);
      }
    });
  });
</script>