We Keep Coding

How to fade out text using JavaScript or jQuery and then bring it back

I am new to JavaScript/jQuery and what I want to do is to fade out text and when the opacity is zero, I want to bring back the text with the same effect. I am leaning towards some kind of if statement and the fade in effect, but don't manage to understand how to put it all together. Any tips for how this could be done using jQuery would be appreciated.
function hideText() {
var fadeText = document.getElementById("fadeTextp");
fadeText.style.opacity = 0;
fadeText.addEventListener("transitionend", function(e) {
alert("The text is hidden, but how can I now get it back with same effect?")
}, false);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>

I'm not sure what your overall goal is, but there are lots of ways to do this kind of thing. Some could use only CSS, some could use JavaScript, some could use both. I'll do a "both" example.
Note: It would probably be better to use one or the other - so you don't define the transition time in both places.
Note: jQuery has animation support built in. See the answer from #Twisty for a jQuery example and links to their docs.
var transitionTime = 2250;
var faderTimeout = null; // keep track of this to cancel it if multiple events happen
var fadeText = document.getElementById("fadeTextp");
function hideText() {
fadeText.classList.remove('out');
fadeText.classList.add('out');
window.clearTimeout(faderTimeout);
faderTimeout = window.setTimeout(() => {
fadeText.classList.remove('out');
}, transitionTime);
}
.fade {
opacity: 1;
transition: opacity 2.25s ease-in-out;
-moz-transition: opacity 2.25s ease-in-out;
-webkit-transition: opacity 2.25s ease-in-out;
}
.fade.out {
opacity: 0;
}
<p id="fadeTextp" class="fade" onclick="hideText();">
Fade out this text and then bring it back when clicked again.
</p>

Here's a jQuery example since you asked for jQuery. You need a container with some height to be able to click again for the text to come back. If you don't have this container then the thing you add a "click" event listener to is not available to click anymore.
I use the :visible selector to see if the text is visible and if so fadeOut and if it's not visible then fadeIn.
let fadeTextp = $("#fadeTextp");
$("#fadeTextContainer").on("click", () => {
if (fadeTextp.is(":visible")) {
fadeTextp.fadeOut()
} else {
fadeTextp.fadeIn()
}
});
#fadeTextContainer {
height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="fadeTextContainer">
<p id="fadeTextp">
Fade out this text and then bring it back when clicked again.
</p>
</div>

Here is a quick jQuery Example.
$(function() {
$(".fade").click(function() {
var $this = $(this);
$this.fadeOut(600, function() {
$this.fadeIn(600);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">
Fade out this text and then bring it back when clicked again.
</p>
This uses .fadeOut() and cascades a callback to .fadeIn().
See more:
https://api.jquery.com/fadeout/
https://api.jquery.com/fadein/
You can also animate the visibility.
$(function() {
$(".fade").click(function(e) {
var t = $(this);
if (t.hasClass("out")) {
t.animate({
opacity: 1
}, 600);
t.removeClass("out");
} else {
t.animate({
opacity: 0
}, 600);
t.addClass("out");
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="fadeTextp" class="fade">Fade out this text and then bring it back when clicked again.</p>

Opacity transition works on fade out, but not fade in

This is frustrating me to no end. Before I post the code, here's a summary:
The goal, in simple terms: when I double click X, I want it to fade out; when I click Y, I want X to fade in.
The method: I'm using CSS to create the actual fade-in and fade-out "animations." I'm using JavaScript to apply the classes when necessary using a little trickery.
The problem: the fade-in transition doesn't work -- the element just appears instantly. What is driving me insane is the fact that the fade-in, when instantly added back onto a faded-out object, works perfectly. I'll explain this better as a comment in the JS code.
(Yes, I've added opacity: 1 and transition: opacity onto the base elements. It had no effect at all.)
The code:
CSS
*.fade-out {
opacity: 0;
transition: opacity 400ms;
}
*.fade-in {
opacity: 1;
transition: opacity 400ms;
}
*.hide {
display: none;
visibility: hidden;
}
JavaScript
$( '#ArtistEmblem' ).on( 'dblclick', function() {
fadeOut($( '#ArtistEmblem' ));
fadeIn($( '#btnShowLogo' ));
});
$( '#btnShowLogo' ).on( 'click', function() {
fadeOut($( '#btnShowLogo' ));
fadeIn($( '#ArtistEmblem' ));
});
function fadeOut(element) {
element.addClass( 'fade-out' );
setTimeout( function () {
element.addClass( 'hide' );
/*
* I tried immediately adding the 'fade-in' class here
* and it worked -- as soon as the element faded out, it faded
* back in (using the CSS transition). However, outside of this,
* it REFUSES to work; everything appears instantly
*/
console.log('timer triggered');
}, 400);
}
function fadeIn(element) {
element.removeClass( 'hide' );
element.removeClass( 'fade-out' );
element.addClass( 'fade-in' );
}
Relevant HTML
<div id="ArtistEmblem">
<img src="img/logo_artist_2.png" />
</div>
<div id="PopMenu" class="collapse">
<article>
<header>
<b>Debug Menu</b>
</header>
<section>
<button id="btnOpenOverlay">Open Overlay</button>
<button id="btnShowLogo" class="hide">Show Logo</button>
<button id="btnClose">Close Menu</button>
</section>
</article>
</div>
I apologize if this is something obvious but I've wasted far too much time trying to solve it. I am also open to better, faster, or more efficient solutions if that would be the best answer. Thanks in advance!

The problem is that the initial opacity of "hidden" element is 1 by default. You just need to set it to 0. And also remove display: none –
*.hide {
opacity: 0;
}
Also I would do a little refactoring and remove setTimeout:
$('#ArtistEmblem').on('click', function() {
fade($('#btnShowLogo'), $(this));
});
$('#btnShowLogo').on('click', function() {
fade($('#ArtistEmblem'), $(this));
});
function fade(inElement, outElement) {
inElement.removeClass('hide');
inElement.addClass('fade-in');
outElement.removeClass('fade-in');
outElement.addClass('fade-out');
}
If you don't want the hidden element to occupy space and you want it to be displayed-none, then you need to set display: block before starting the fadeOut.

I know you're asking for a JS heavy answer, but I highly recommend toggling a class of "active", "open" or something similar and using CSS with the transition. Less is more here.
Here's an example fiddle of something I've transitions not only the opacity, but also the z-index. That's the key with these transitions if you intend on having any elements below such as buttons that require hovering, clicking, etc.
JS Fiddle
Key parts:
.container {
z-index: -1;
opacity: 0;
transition: z-index .01s 1s, opacity 1s;
}
.container.active {
transition: z-index 0s, opacity 1s;
z-index: 500;
opacity: 1;
}
EDIT
I was just messing around with this type of thing for my own project, and observing how beautiful Stripe handles their navigation bar. Something so simple changes everything, and that's pointer-events. If you're okay with its support, (notable no ie. 10) this is infinitely easier to integrate. Here's another fiddle of the simulation in a nav bar.
The key part is pointer-events: none, as it ignores click events if set to none, almost as if it wasn't there, yet visibly it is. I highly recommend this.
https://jsfiddle.net/joshmoxey/dd2sts7d/1/

Here is an example using Javascript Animate API. Animate API is not supported in IE/Edge though.
var element = document.getElementById("fade-in-out")
var button = document.getElementById("x")
button.addEventListener("click", function(event) {
element.animate([{opacity: 1, visibility: "visible"},{opacity: 0, visibility: "hidden"}], {duration: 2000})
setTimeout(function() { element.remove() }, 2000)
})
button.addEventListener("dblclick", function(event) {
element && element.animate([{opacity: 0}, {opacity: 1}], {duration: 2000})
})
<input id="x" type="button" value="Click here" />
<div id="fade-in-out"> FADE ME </div>

How to trigger animation on child element when the parent is 75% into its animation ?

How to programatically(using Javascript) know when an animation is 75% complete ? actually i have alot of nested HTML elements that need to be animated using an animation delay property and the way it works is the nested animation should trigger , when the parent element is 75% complete , i know how the animationend event works , but thats not really what i am looking for , see the FIDDLE HERE
HTML:
<div>
<p>hello world</p>
</div>
animation delay code:
div p {
line-height: 200px;
text-align: center;
-webkit-animation-name: icon-bounce-in;
-moz-animation-name: icon-bounce-in;
-o-animation-name: icon-bounce-in;
animation-name: icon-bounce-in;
-webkit-animation-duration: .5s;
-moz-animation-duration: .5s;
-o-animation-duration: .5s;
animation-duration: .5s;
-webkit-animation-delay: .375s;
-moz-animation-delay: .375s;
-o-animation-delay: .375s;
animation-delay: .375s;
}
(not the best visual example) See how i have delayed the execution of the p animation by 75% manually , but how would i do this programatically in javascript , for a large set of elements (not necessarily add an animation delay to the child elements , but check when the parent element is 75% into its animation stage and then trigger the animation on the child element).

You could always use jQuery delay to stagger animations.
Update to your FIDDLE
HTML
<div id="outer">
<p id="inner">hello world</p>
</div>
<button id="clicker">click</button>
Javascript
$('#clicker').click(function() {
var outerDuration = 500;
$('#outer').css({top: '-50px', position: 'relative'})
.animate({top: 0}, outerDuration);
$('#inner').css({position: 'relative'}) // had trouble animating position, maybe just me
.delay(outerDuration*.75) // the magic
.animate({top: '-50px'}, 0, function() { // make use of oncomplete callback to properly obey delay
$('#inner').animate({top: 0}, outerDuration)
});
})

ok this is a little trick i played there fiddle
what i did is, i calculated the distance the div will travel in whole transition and set a watch(setInterval) on it and calculated its dimenation on a time interval of 10 mili seconds (this is adjustable), as soon as div/child p traveled the 75% distance i pushed an alert, you can call any function or do anything there, here is code
var start=null;//distance covered in transition
var flag=1; //depending on direction of transition, -1 for down to up
var pos;
var distance=200;
var a=setInterval(function(){
if(start==null){
start=$('div').position().top;
}
pos=$('div').position().top;
console.log(pos,start,distance);
if(pos>=(start+(0.75*distance))){
alert("animation is 75% done");
clearInterval(a);
}
},1);

Display animation based on link # extension

Is it possible to set jQuery up to catch a # link and display an animation based on which one it picks up?
Example:
Click Link 1 > /index.php#1 = pulsate div 1
Click Link 2 > /index.php#2 = pulsate div 2
Click Link 3 > /index.php#3 = pulsate div 3
I currently have a guide/rule page, and it want it to highlight the correct content when people are taken there by a specific link. I understand basic jQuery animations, just not giving them rules from a parent page.

1. Read hash from URI
JS's window.location.hash will read the hash like "#1" which is a valid ID in HTML5
jQuery(function($) {
$( window.location.hash ).addClass("pulsate");
});
where you have DIV elements like
<div id="div1">I'm DIV 1</div>
and a CSS class like
.pulsate {
/* other styles here... */
animation: pulsate 0.5s ease-in-out;
animation-iteration-count: 5; /* Pulsate 5 times */
}
#keyframes pulsate {
0% {transform: scale(1);}
50% {transform: scale(1.2);}
}
2. Read hash from clicked link
If you're not interested in reading the URI's hash but you have simply LInks like
<a class="animateButton" href="#div1">Animate DIV1</a>
than this is all you need:
$(".animateButton").on("click", function(){
$( this.hash ).addClass("pulsate").on("animationend", function(){
$(this).removeClass("pulsate");
});
});
.pulsate {
background: orange;
animation: pulsate 0.5s ease-in-out;
transition:0.5s;
animation-iteration-count: 3;
}
#-webkit-keyframes pulsate {
0% {transform: scale(1);}
50% {transform: scale(1.1);}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="animateButton" href="#1">#1</a>
<a class="animateButton" href="#2">#2</a>
<a class="animateButton" href="#3">#3</a>
<div id="1">I'm DIV #1</div>
<div id="2">I'm DIV #2</div>
<div id="3">I'm DIV #3</div>

It's not rules "from a parent page". You can get the hash parameter from a page's url by using location.hash:
//index.php#1
location.hash //-> will return #1
//index.php#2
location.hash //-> will return #2
Then, you can select it directly in your jQuery selector as $(location.hash). This will enable you to animate the targeted div.
$(document).ready(function() {
//Do your animation
$(location.hash).animate(/*...*/)
});
obs:
Remember that divs with numeric ids are only valid in HTML5

Here is a fiddle that you play with it. I didn't add animations but left it to you as an exercise. =]
HTML
sec1
sec2
sec3
JS
$("a").on('click', function(event){
var t = event.target.toString();
if (t.endsWith('1')){
alert('animation 1');
} else if (t.endsWith('2')){
alert('animation 2');
} else if (t.endsWith('3')){
alert('animation 3');
}
});

You have to listen to the hash changes.
Try to use a plugin like hashchange.
$(window).hashchange((function(){
var hash = window.location.hash.replace("#",'');
// remove previous animation from element if there's one
if(hash) {
// do your animation adding class or with pure jquery
}
return arguments.callee; // return itself as the hashchange handler
})( )); // exec the first time and then at each hash changes
Remeber to remove the class or the javascript animation fron previuos pulsating element.
jQuery hashchange plugin

How to dynamically rotate the circle on every click using Jquery/Javascript/css?

I have a CSS class which forms a circle and I am trying to rotate it dynamically from Jquery by adding a css property .It works fine when I click the button for the first time and rest of the time it's idle. I tried using "cssAmination" function and its of no use. I am not able to figure out where I am going wrong. Please help me out in fixing this code. Thanks in advance.
/*Circle code*/
div.circle{
width: 300px;
height: 300px;
-moz-border-radius:150px;
-webkit-border-radius: 150px;
background:#808080;
border-radius: 150px;
bottom: -150px;
left: -150px;
position: absolute;
}
/*rotate class*/
div.rotateCircle
{
/* Firefox: */
-moz-animation-duration: 2s;
-moz-animation-timing-function: ease-in-out;
-moz-animation-iteration-count: 1;
-moz-animation-play-state: running;
}
#-moz-keyframes moveCircle
{
from {-moz-transform:rotate(0deg);}
to {-moz-transform:rotate(90deg);}
}
//Jquery code:
<script type="text/javascript">
$(document).ready(function(){
$("a").click(function(){
$('div#rotateCircle').css({'-moz-animation-name':'moveCircle'});
});
}); </script>
<body>
<h3>Labs Project</h3>
<div>
<div id=rotateCircle class="circle">
</div>
<div id=rotateCircle class="horizontalLine">
</div>
<div id=rotateCircle class="verticalLine">
</div>
<div class="divButton">
<table>
<tr>
<td><a class="btn" href="#">HOME</a></td>
<td><a class="btn" href="#">Class</a></td>
<td><a class="btn" href="#">CV</a></td>
<td><a class="btn" href="#">CM</a></td>
</tr>
</table>
</div>
</div>
</body>

You should take a look to the JavaScript events for the animations : https://developer.mozilla.org/en/CSS/CSS_animations#Using_animation_events
Basically, I've added a class for the animation's name
#rotateCircle.rotate {
-webkit-animation-name: moveCircle;
-moz-animation-name: moveCircle;
-o-animation-name: moveCircle;
animation-name: moveCircle;
}
And instead of adding the CSS in jQuery, you just add the class and remove it when the animation is finished, with the animationend event :
$(function() {
var $rotateCircle = $('div#rotateCircle');
$("a").click(function(){
$rotateCircle.addClass('rotate')
.on('animationend', function() {
$rotateCircle.removeClass('rotate');
});
});
});
(I've made it look a bit nicer too)
Here is the new working fiddle.
NB: The animationend event is prefixed on some browser, here is a gist I've made to support all the different browser (you'll need Modernizr).

There is a css3 transition property that will make this task really simple. I used webkit for my post, change properties accordingly.
CSS
#rotateCircle.rotate {
-webkit-transform: rotate(0);
-webkit-transition: -webkit-transform 2s; //+ optional path i.e. linear
}
Then with js, all you need is to set the css property to transition on, and it will magically animate to those settings, in this case transform.
$(function() {
var angle = 0;
$("a").click(function(){
angle += 90;
$("div#rotateCircle").css("-webkit-transform", "rotate("+angle+"deg)";
});
});
I didn't test this code, but the transition property is simple to use, and since I've learned it, I rarely use keyframes/css animation properties anymore.