JSFiddle - React, Tailwind, and code Playground

by steven keezer

HTML

<title>Playing with the DOM</title>

<h1 id="main-heading">Hello world!</h1>
<p>New Heading</p>
	
<script src="https://code.jquery.com/jquery-2.1.0.js"></script>

JavaScript

$("h1").fadeOut(1000);
	$("h1").fadeIn(1000);

	for (h1=0; h1<5; h1++) {
	$("h1").fadeOut(300);
	$("h1").fadeIn(300);
	}
		
	$("h1").hide(2000);
	$("h1").show(2000);
	
/*1. But what happens if you call fadeIn on an element that’s already visible or an
element that comes after the element you’re animating? 
Answer: Calling fadeIn or using fadeIn before or after animation does nothing to the element if the element is already visible. 


/*2. For example, say you add a new p element to your dom.html document after the heading. Try using slideUp and slideDown to hide and show the h1 element, and see what happens to the p element. What if you use fadeOut and fadeIn?
Answer: These jQuery methods have no effect on the p element. 
*/

/*3. What happens if you call fadeOut and fadeIn on the same element without chaining the calls?
Answer: These jQuery methods are executed even without chaining. 
*/

/*4. Try adding the preceding code inside a for loop set to run five times. What happens?
Answer: The for loop executes the code: the h1 element to run five times. 
*/

/*5 What do you think the show and hide jQuery methods do? Try them out to see if you’re right. How could you use hide to fade in an element that’s already visible?
Answer: The show slides down to show the called element whereas the hide method slides up and hides the called element.  One cannot use the hide method to fade in an element that’s already visible because that is not the function of the hide method. 
*/