Javascript:如何淡出一个 div 并显示另一个 div？

Question

 <div> <h1>Posted Jobs</h1>   
  <div class="container gallery" id="Jobs" >

 </div>
</div>
<div class="Job applications" id="Application">
  <a>Applicants</a><br>
  <li class="entry" id="pos_1">
  </li>
</div>

这是发布的工作 div 的 javascript。它从 firebaseDB 中检索条目并显示文件夹

   firebase.auth().onAuthStateChanged((user) => {
  if (user) {
        database = firebase.database();

      var BusinessesId = firebase.auth().currentUser.uid;
      var ref = database.ref('/Jobs/');
    ref.on('value', JobData,  errData);

  }
  })
         function JobData(data) { 

              var container = document.getElementById('Jobs'); 

              data.forEach(function(JobSnap) { // loop over all jobs
                var key = JobSnap.key;
                var Jobs = JobSnap.val();
                var newCard = `
                       <div class="thumbnail" id="${key}">
                           <span class="folder"><span class="file"></span></span>
                           <div class="title" id="Jobs">${Jobs.JobTitle}</div>
                        </div>
                    `;
              container.innerHTML += newCard;
              console.log(key);
              })
            }

然后我有另一个 JavaScript 函数

   function ApplicationData(data) { 

          // var ref = database.ref('/Applications/');
          //    ref.on('value', JobData,  errData);

              var container = document.getElementById('Application'); 

              data.forEach(function(applicationSnap) { // loop over all jobs
                var key = applicationSnap.key;
                var application = applicationSnap.val();
                var newCard = `

                  <li class="entry" id="${key}">
                       <a>
                        <aside>
                          <strong>${application.ApplicantName}</strong>
                          <p>${application.ApplicantNumber} ${application.Applicantemail}</p>

                        </aside>
                        <img src="http://i.imgur.com/lIkWmas.png"/>
                        <i></i>
                      </a>
                      <ul>
                        <li style="background-color:#246f41"></li><li style="background-color:#f57b20"></li><li style="background-color:#433e42"></li>
                      </ul>
                    </li>
                    `;

              container.innerHTML += newCard;
              // console.log(key);
              })
            }

显示以这种格式单击的各个文件夹的条目的条目

这是我的点击处理程序

  $(window).load(function(event){
  $(".gallery").show();
  });
 var JobId = {};

 $('.container').on('click', '.folder', function(e){
 var ClickedJobId = $(this).closest("div").prop('id');
 JobId.value = ClickedJobId;

 alert(ClickedJobId);
 console.log(ClickedJobId);

 $('.gallery').removeclass();
 $('.applications').addClass('fade');
 // $('.return').fadeIn('fast');
  })

我已经想出了如何保存被点击元素的 ID。我需要做的是单击文件夹时，我希望 UI 淡出文件夹并显示相应的应用程序。我如何有效地做到这一点？

Answer 1

您可以使用 $.fadeIn() 和 $.fadeOut() 并且您可以同时运行它们，或者如果您将一个作为回调传递对于另一个，第二个只会在第一个完成时运行。

$('.one').fadeOut('fast',function() {
  $('.two').fadeIn('fast');
})

.two {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="one">one</div>
<div class="two">two</div>