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>

angular ngShow with animate.css

I want to animate the showing and hiding of an element using animate.css and angular.
I have read this SO question and the angular documentation for ngShow and ngAnimate but still cannot get it to work.
I have tried the following setup on plunker, but it doesn't work.
app.js
var app = angular.module('plunker', ['ngAnimate']);
app.controller('MainCtrl', function($scope) {
$scope.show = true;
});
index.html
<body ng-controller="MainCtrl">
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show === true">Show is true</div>
<div class="hide" ng-click="show = !show" ng-show="show === false">Show is false</div>
</body>
style.css
.show.ng-hide-add {
animation: fadeOut 5s linear;
}
When clicking on "show is true" (and therefor hiding it) I see it wait for 5 second before hiding, so there is something happening, but it doesn't fade out.
I can make it work if I add this to the css:
.show.ng-hide-add {
opacity: 1.0;
display: block !important;
transition: opacity 1s;
}
.show.ng-hide-add-active {
opacity: 0;
}
However, I don't want to do it this way. I want to use animate.css's keyframes (I think that's the correct term, my css lingo isn't brilliant) such as fadeIn, fadeOut etc..
plunker to show what I am seeing.
What am I doing wrong? How can I use animate.css's keyframe animations with angular's ngAnimate?

You have to use .ng-hide class, as it's the class that is assigned once the condition in ng-show is false, or in ng-hide is true.
According to that you can edit your code like this:
.show.ng-hide,
.hide.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show,
.hide{
transition: all linear 0.5s;
opacity:1;
}
<p>Show: {{show}}</p>
<div class="show" ng-click="show = !show" ng-show="show">Show</div>
<div class="hide" ng-click="show = !show" ng-hide="show">Hide</div>
-
EDIT:
In case you want to use the animate.css classes, for example .fadeIn and .fadeOut you have to assign the corresponding keyframes inside your css.
So you have to use the following CSS:
.show.ng-hide,
.hide.ng-hide{
animation-name:fadeOut;
animation-duration: .5s;
}
.show{
animation-name:fadeIn;
animation-duration: .5s;
}
IMPORTANT NOTE:
In order to make it work correctly in the plunker I have not used the 3.2.0 version suggested by the plunker external library finder, but I manually linked the 3.5.1 version adding the following code in the html
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.css" />
-
Working Plunker with full code

Change your code to this
<div ng-show="show">
<div class="show" ng-click="show = !show">Show</div>
</div>
<div ng-show="!show">
<div class="hide" ng-click="show = !show" >Hide</div>
</div>
.show.ng-hide{
opacity: 0;
transition: all linear 0.5s;
}
.show{
transition: all linear 0.5s;
opacity:1;
}

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.

ng-animate not working as expected

I am trying to do a simple fade in of an element when a boolean variable is set to true. It was working fine earlier, until I changed my AngularJS version to 1.2.15. Am I doing something incorrectly?
Here is a sample JSFiddle.
<div ng-app="myApp" ng-controller="myController">
{{ready}}
<div ng-show="ready" ng-animate="{show:'animate-show'}">hello</div>
</div>
$scope.ready = false;
function displayBox() {
$scope.ready = true;
$scope.$apply();
}
setTimeout(displayBox, 1000);

Animation syntax changed in Angular 1.2.x. Now you have to use ngAnimate module as dependency and change the way you apply animation with CSS. Your HTML becomes:
<div class="animate-show" ng-show="ready">hello</div>
And in your situation you only need this simple CSS:
.animate-show {
opacity: 1;
-webkit-transition: all linear 0.5s;
transition: all linear 0.5s;
}
.animate-show.ng-hide {
opacity: 0;
}
Demo: http://plnkr.co/edit/nHZ6P6evV2Ee4NtIeMZY?p=preview

Having issue with jQuery hover function

JS
$(".row").live("hover",
function()
{
$(".remove").fadeIn();
}
);
$(".row").live("blur",
function()
{
$(".remove").fadeOut();
}
);
HTML Markup
<div class="row chapter" node="1">
<img class="remove" src="design/images/remove.png">
Sample
</div>
<div class="row chapter" node="2">
<img class="remove" src="design/images/remove.png">
Sample 2
</div>
What I want to do is,
to fade in on hover event, image with class .remove (which stands
inside hovered .row div) and fade out on blur event.
On .remove click, get parent div's node attribute
JsFiddle
http://jsfiddle.net/tt13/3VG5P/3/
Am I missing something?

To fade in on hover event, image with class .remove (which stands inside hovered .row div) and fade out on blur event.
This will toggle the class "remove" within the hovered row.
$('.row').hover(function() {
$(this).find('.remove').stop(true, true).fadeIn();
}, function(){
$(this).find('.remove').stop(true, true).fadeOut();
});
You should also use stop(true, true) to clear the animation queue and end any ongoing animation.
On .remove click, get parent div's node attribute
$('.remove').click(function() {
var $parent = $(this).parent();
var nodeValue = $parent.attr('node') || "missing-node-value";
console.log("node =", nodeValue); // DEBUG
$parent.slideUp();
});
View demo.

$(".row").hover(function(){
$(".remove", this).stop().fadeIn();
}, function(){
$(".remove", this).stop().fadeOut();
});
try this one.

This is a job for CSS, not jQuery. I would use this simple CSS:
.row .remove {
opacity: 0;
-webkit-transition: opacity 0.5s ease;
-moz-transition: opacity 0.5s ease;
-ms-transition: opacity 0.5s ease;
transition: opacity 0.5s ease;
}
.row:hover .remove {
opacity: 1;
}​
Demo http://jsfiddle.net/KPQ5h/
If you still want javascript:
$(".row").on({
mouseover: function() {
$(this).find('.remove').fadeIn();
},
mouseout: function() {
$(this).find('.remove').fadeOut();
}
});​
http://jsfiddle.net/KPQ5h/1/

Check the syntax:
(".remove").fadeIn();
//Should be
$(".remove").fadeIn();
Try:
$(this).children(".remove").fadeIn();
Edited:
BLUR events dont work on DIVs so you could try using mouseout, like
$(".row").live("mouseout", function() {
$(this).children(".remove").fadeOut();
});