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>

Transition both ways between text elements

I have two paragraphs (lets say with id "p1" and "p2")
I would like to transition from one to another when a link is clicked, and vice versa when a different link is clicked. They are located on the same page but only one is displayed at a time (using javascript to hide one then display the other when the link is clicked).
Both paragraphs have "hidden page" as their classes.
Would the css resemble something like this?
.hidden {
opacity: 0;
display: none;
transition: opacity 1s linear;
}
.page {
transition: opacity 1s linear;
opacity: 1;
}
I know it's not that but would it be something similar?
EDIT:
Link to the gist of the css, js, and html files
https://gist.github.com/EricHanLiu/a4b09862f2d25b6c6e5f
edited out some things like name phone# email etc, but the main focus of is on the two paragraphs in the middle

If you are trying to fade in one paragraph when clicking on a link and faded the other one out if it is visible then you can do something like the following:
Live Preview
HTML:
<a id="first" href="#p1">1</a> <a id="second" href="#p2">2</a>
<div class="fadeIn">
<p id="p1" class="hidden">I am the first paragraph.</p>
</div>
<div class="fadeIn">
<p id="p2" class="hidden">I am the second paragraph.</p>
</div>
CSS:
.hidden {
opacity: 0;
}
/*fade in transition css below*/
.fadeIn p {
-webkit-transition: opacity 2.0s ease-in;
-moz-transition: opacity 2.0s ease-in;
-o-transition: opacity 2.0s ease-in;
}
.fadeIn p.clicked {
opacity: 1;
}
JavaScript:
//helper function to select the element by id
function $(id){
return document.getElementById(id);
}
//on click event for first
$("first").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.add("clicked");
$("p2").classList.remove("clicked")
});
//on click event for second
$("second").addEventListener("click",function(event){
//prevent page refresh or navigation
event.preventDefault();
$("p1").classList.remove("clicked");
$("p2").classList.add("clicked");
});

As you said, you need two links to trigger the two paragraphs, respectively.
Here's my simple solution to your problem. I am not that sure that this is what you are looking for. But hopefully this helps!
<div>
<p class="show" id="p1">Paragraph 1</p>
<p class="hidden" id="p2">Paragraph 2</p>
Show Paragraph 1
Show Paragraph 2
</div>
<script type="text/javascript">
var sb1 = document.getElementById('sb1');
var sb2 = document.getElementById('sb2');
var p1 = document.getElementById('p1');
var p2 = document.getElementById('p2');
sb1.addEventListener('click', function() {
p1.classList.remove('hidden');
p1.classList.add('show');
p2.classList.remove('show');
p2.classList.add('hidden');
});
sb2.addEventListener('click', function() {
p1.classList.remove('show');
p1.classList.add('hidden');
p2.classList.remove('hidden');
p2.classList.add('show');
});
</script>
In the script above, I just switched the respective classes on the two paragraphs.
There a lot of solution to this, you can use jQuery to simplify this solution.

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

AngularJS can we trigger the move animation event manually

In the ng-repeat section there are animations event handler for enter, leave and move. But the move event is only triggered when we resort or filter the array used for ng-repeat. What if I only change the attribute values of my objects. Then no event is triggered at all. Is there a way to trigger the event manually after I have changed the object attribute?
Here is a fiddle: http://jsfiddle.net/U3pVM/15002/
Html:
<ul>
<li ng-repeat="d in data">
<div class="lala" style="width: {{d.a}}px">foo</div>
</li>
</ul>
JS:
function TodoCtrl($scope) {
$scope.data = [{a:100}, {a:120}];
// I would like to animate the value changes
$scope.change = function() {
$scope.data[0].a = 110;
$scope.data[1].a = 90;
}
}

your class definitions are wrong.
.lala,
.lala.ng-enter,
.lala.ng-move,
.lala.ng-leave {
background-color: grey;
-webkit-transition:all 1s linear;
-moz-transition:1s linear all;
-o-transition:1s linear all;
transition:all 1s linear;
}
See the working fiddle here.

just add transition to the main class
.lala{
transition:0.5s;
background-color:grey;
}
https://jsfiddle.net/U3pVM/15006/