Разделение контейнера меню не работает / не работает

Question

Я работаю над торрент-страницей и пытался реализовать стиль постепенного появления / исчезновения контейнера div с помощью js.Но код почему-то не работает, а также в консоли нет журнала ошибок.Ниже приведены мои коды:

HTML:

<div class="cover-container d-flex w-100 h-100 p-3 mx-auto flex-column">
      <header class="masthead mb-auto">
        <div class="inner">
          <h3 class="masthead-brand">Torrents.ServerClouD</h3>
          <nav class="nav nav-masthead justify-content-center">
            <a class="nav-link active" id="home" href="index.php">Home</a>
            <a class="nav-link" id="torrents">Completed Torrents</a>
            <a class="nav-link" id="contact">Contact</a>
          </nav>
        </div>
      </header>

      <div class="main" id="home-container">
      <main role="main" class="inner cover">
        <h1 class="cover-heading">Upload your .torrent file</h1>
        <p class="lead">Magnet Link support is currently in development and will be available soon.</p>
        <p class="lead">
       <form name="frm" action="reciever.php" method="post" enctype="multipart/form-data" onsubmit="completeAndRedirect();"> 
          Filename: <br> <input  id="file" name="file" type="file" accept=".torrent" /> <br><br> 
          <input type="submit" name="Upload" value="Submit" /> 
    </form>
        </p>
      </main>
      </div>

      <div class="main" id="torrents-container" style="display:none">
      <h2>Here is the link for torrents which have downloaded / leeched completely.</h2>
        <input type="submit" value="Click Me!" name="DoneTorrents" onclick="window.open('https://servercd.tk')"  style="height:50px; width:80px" />
      </div>

      <div class="main" id="contact-container" style="display:none">
      <p>Please contact us at blahblahblahblah</p>
      </div>

JS:

 $('#home').click(function(e){    
    $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
        $('#home-container').fadeIn('slow');
    });
});

  $('#torrents').click(function(e){    
       $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
           $('#torrents-container').fadeIn('slow');
       });
   });

    $('#contact').click(function(e){    
         $('#home-container, #torrents-container, #contact-container').fadeOut('slow', function(){
            $('#contact-container').fadeIn('slow');
        });
    });

function completeAndRedirect(){

        var input= document.forms['frm'].file.name;
            if(input==null) {
                alert("please upload first!");
            }else{
               //var t = alert('Please wait while Uploading...');
                $unicode = iconv("utf-8","cp936","name");
                location.href='reviever.php';

                }
            }

Я знаю, что, должно быть, произошла ошибка, но я не смог ее найти.

Answer 1

Выбор нескольких идентификаторов будет работать, но fadeOut необходимо применять индивидуально.

$("#home-container, #torrents-container, #contact-container").each(
  function() {
    $(this).fadeOut('slow')
  })

, и эту функцию нужно будет реализовывать отдельно.

 $('#home-container').fadeIn('slow');

при условии, что вы хотите, чтобы он исчез после того, как все исчезло

$ ('# contact'). Click (function (e) {

var items = $("#home-container, #torrents-container, #contact-container");

items.fadeOut («медленно»)

$('#contact-container').fadeIn('slow'); 

});