Question

我正在使用torrent页面，我尝试使用js实现div容器淡入/淡出样式。但是代码由于某种原因不起作用，并且在控制台中也没有错误日志。以下是我的代码：

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

选择多个ID会有效，但fadeOut需要单独应用。

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

此功能必须单独实施。

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

假设你希望它在一切消失之后变得褪色

$（ '＃' 接触）。单击（函数（E）{

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

items.fadeOut（ “慢”）

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

});

菜单容器div淡入/淡出不起作用

1 个答案: