使用jQuery淡入div

Question

我首先尝试在加载页面时淡入div，然后一旦加载，我就有2个其他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的代码。 因此，如果单击按钮视频，则包含单词video的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> 

谢谢您的帮助 ;）

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>