使用jQuery淡入一个div

Question

我首先尝试让一个div在页面加载完成后淡入，然后在它上面有两个表现为按钮的div。我想能够点击这两个div来使其他div出现在第一个div上方。以下是应该在页面完成加载后淡入的第一个div的代码：

<div id="step1" style="visibility: hidden; display:block">
 <a id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
  <br>
  <p><b>Create a video ad:</b></p>
  <video width="200" height="113" autoplay="autoplay" mute>
     <source src="video/exemple.mp4" type="video/mp4">
   Your browser does not support the video tag.
  </video>
 </div></a>
 
 <a id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
  <br>
  <p><b>Create a picture ad:</b></p>
  <img src="images/adexemple.jpg" alt="Exemple of a picutre ad" height="113" width="200">
 </div></a>

</div>

以下是下一个div的代码，如果任何一个按钮被点击，我想要它们淡入。所以如果点击视频按钮，包含“视频”字样的div将淡入，同时包含按钮的div将淡出；同样适用于第二个图片按钮：

<div id="step2-video" class="box" style="visibility: hidden; background:#C0C0C0">
 video
</div>

<div id="step2-picture" class="box" style="visibility: hidden; background:#C0C0C0">
 picture
</div>

最后这里是JavaScript代码，但是它并不起作用：

<script type="text/javascript">
var step1 = $('#step1'),
    step2-video = $('#step2-video'),
    step2-picture = $('#step2-picture'),
var boxes = $('.box');

$('#btn-step2-video').click(function(){
    fade(step1, step2-video);
});

$('#btn-step2-picture').click(function(){
    fade(step1, step2-picutre);
});*/

$(document).ready(function() {
            $("#step1").fadeIn("quick");
        });

function fade(thisIn, callback){
  $(thisIn).fadeOut("slow");
  $(callback).fadeIn("slow");
});
</script>

感谢您的帮助 ;)

- 0xtuytuy

---

将所有代码都包裹在.ready函数中，而不是包裹$("#step1").fadeIn("quick");。 - underscore

将事件处理程序的初始化放在$(document).ready()еќ—е†…гЂ‚ - rmorrin

你们似乎都在说同样的事情，但我不确定你们的意思:/ - 0xtuytuy

Answer 1

我编辑了你的原帖，以下是代码。我猜这就是你想要的功能吧？

$(function() {
    var step1 = $('#step1');
  var step2video = $('#step2-video');
  var step2picture = $('#step2-picture');
  var boxes = $('.box');

  step1.fadeIn("slow");
  
  $('#btn-step2-video').click(function() {
      fade(step1, step2video);
  });

  $('#btn-step2-picture').click(function() {
      fade(step1, step2picture);
  });
  
  var fade = function(thisIn, callback){
      $(thisIn).fadeOut("slow");
      $(callback).fadeIn("slow");
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="step1" style="display:none; background: #ff0000; width: 100px; height: 100px;">
 <a href="#" id="btn-step2-video" style="position:fixed; top: 45%; left: 25%;"><div class="btn-ad-choice ad-choice">
  <br>
  <p><b>Create a video ad:</b></p>
 </div></a>
 
 <a href="javascript:void(0);" id="btn-step2-picture" style="position:fixed; top: 45%; right: 25%;"><div class="btn-ad-choice ad-choice">
  <br>
  <p><b>Create a picture ad:</b></p>
 </div></a>

</div>

<div id="step2-video" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
 video
</div>

<div id="step2-picture" class="box" style="display: none; background:#C0C0C0; height: 100px; width: 100px;">
 picture
</div>

- johniejohnie