CODEWITHSUNDEEP
javascriptjqueryhtmlcss
0xtuytuy
0xtuytuy

Reputation: 1654

Using jQuery to fade in a div

I am firstly trying to fade in a div as soon as the page is loaded, then once its loaded I have 2 other divs on it that are acting like buttons. I would like to be able to click those 2 divs to be able to make other divs appear on top of the first one. Here is the code for the first div that should fade in a soon as the page is finished loading:

<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>

and here is the code for the next divs that I would like to fad in if either of the 2 buttons is clicked. So if the button video is clicked the div containing the word video will fade in and the div containing the buttons will fade out, same for the second button with picture:

<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>

Finally here is the Javascript, however it does not work:

<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>

Thank you for your help ;)

Upvotes: 3

Views: 100

Answers (1)

johniejohnie
johniejohnie

Reputation: 523

Edited your original post, code is below. Guess this is the functionality you want?

$(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>

Upvotes: 2

Related Questions