Transition both ways between text elements - javascript

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.

Related

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>

Javascript Opacity transition for p element

I have a p element in HTML Code like
<p id="errorEmailMsg" hidden>Wrong Mail</p>
In javascript I want to make a transition, where it changes the opacity from 0 to 1 in 1second.
I tried to do something like
errorMessage.style.opacity = 0;
setTimeout(() => {
errorMessage.style.opacity = 1;
}, this.animationDelay + 20);
How can I achieve this? Thank you and have a nice day :)
I have created a demo with this effect:
https://codepen.io/jordyvd/pen/yLYBvbx
HTML
<p class="p">Some text</p>
<button class="button">Hide it</button>
CSS
.p {
opacity: 1;
transition: opacity 1s;
}
.p.hidden {
opacity: 0;
}
JavaScript
document.querySelector('.button').addEventListener('click', e => {
document.querySelector('.p').classList.toggle('hidden');
});
Click on the button to show/hide the text.
I suggest you look at CSS transitions: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions
Remove hidden attribute.
If you want the element to invisible by default use.
<p id="errorEmailMsg" style="opacity: 0">Wrong Mail</p>

How to smoothly transition and change background color while scrolling using CSS?

I wanted to smoothly transition and change background color while scrolling, preferably using just CSS, and came across the following as a good example: https://minimill.co/
How can I achieve the smooth transition in changing the background color? And also when a button is clicked on the navigation bar, navigate to that particular section of the page? I attempted to check the source code but wasn't any help. The whole source code is in 1 line.
Thank you and will be sure to vote up and accept answer.
WITHOUT EXTRA PLUGINS
If you want to use only JavaScript then you can go about this solution.
In the code below I have 3 divs and each one has the attribute data-color which contains the color that we want to have on the background when the user is over that div. I made it so the color changes not just when the div is on top of the page but when we are after the 2/3 of the previus div.
When the user scrolls, the function below document.onscroll = function() { is called. This function loops through all the divs (credits: https://stackoverflow.com/a/11291363/7053344) and if (if (scrollTop > curDiv.offsetTop - heightBefore){) the scroll top is bigger than the top of a div (curDiv.offsetTop) minus the 1/3 of the hight of the previous div (heightBefore), then the background is changed according to the div's data-color attribute. The smooth transition for the change of the background color is achieved by this line: transition: background 1.5s; on the CSS.
Also included below are the jumps that you wanted. From the first div there is a link that sends you to the second div etc. You can modify them to fit your navigation bar. In order to understand jumps better you can look here.
JSFiddle: https://jsfiddle.net/0pe5n97z/2/
var test = document.getElementById("test");
document.onscroll = function() {
scrollTop = document.documentElement.scrollTop;
test.innerHTML = scrollTop;
allDivs = document.getElementsByTagName('div');
for( i=0; i< allDivs.length; i++ )
{
curDiv = allDivs[i];
// The code below makes the background color change when the
// scroll top passes the 2/3 of the previous div.
heightBefore = 0;
if (i > 0){
heightBefore = allDivs[i-1].offsetHeight / 3;
}
if (scrollTop > curDiv.offsetTop - heightBefore){
color = curDiv.getAttribute("data-color");
document.body.style.background = color;
}
}
};
body {
background: green;
transition: background 1.5s;
}
<body>
<div style="position:fixed" id="test"></div>
<center>
<div id="div1" data-color="green">
<p>Title goes Here</p>
<a name="green">
<p>Green area</p>
Go To Red area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div2" data-color="red">
<a name="red">
<p>Red area</p>
Go To Blue area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="div3" data-color="blue">
<a name="blue">
<p>Blue area</p>
Return To Green area
</a>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</center>
</body>
UPDATE
In order to make it work on different browsers too, you must add these lines in the CSS:
-webkit-transition: background 1.5s;
-moz-transition: background 1.5s;
-ms-transition: background 1.5s;
-o-transition: background 1.5s;
transition: background 1.5s;
and then change the scrollTop initialization in javascript from this:
scrollTop = document.documentElement.scrollTop;
to this:
scrollTop = window.pageYOffset;
You can test it in this updated JSFiddle.
Sources for this update:
css3 background-size transition animation in Webkit doesn't work... Bug? Or wrong syntax?
document.documentElement.scrollTop return value differs in Chrome
WITH EXTRA PLUGINS
As for your question:
smoothly transition and change background color while scrolling
as I wrote in the comment these sources are very helpful:
https://codepen.io/Funsella/pen/yLfAG
http://codepen.io/Funsella/pen/dpRPYZ
The examples in these links use javascript, jquery and other plugins, which I think are neccesary.
As for your question:
when a button is clicked on the navigation bar, navigate to that particular section of the page
this link explains it very well:
http://www.myhtmltutorials.com/jump.html
Below there is a small example of what you want, that was created by using and combining content from the links above:
$( window ).ready(function() {
var wHeight = $(window).height();
$('.slide')
.height(wHeight)
.scrollie({
scrollOffset : -50,
scrollingInView : function(elem) {
var bgColor = elem.data('background');
$('body').css('background-color', bgColor);
}
});
});
* { box-sizing: border-box }
body {
font-family: 'Coming Soon', cursive;
transition: background 1s ease;
background: #3498db;
}
p {
color: #ecf0f1;
font-size: 2em;
text-align: center;
}
a {
text-decoration: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/2542/jquery.scrollie.min_1.js"></script>
<div class="main-wrapper">
<div class="slide slide-one" data-background="#3498db">
<p>Title</p>
<center>Go To Green.</center>
</div>
<div class="slide slide-two" data-background="#27ae60">
<a name="green">
<p>Green area</p>
<center>Go To Red.</center>
</a>
</div>
<div class="slide slide-three" data-background="#e74c3c">
<a name="red">
<p>Red area</p>
<center>Page over. Hope that was helpful :)</center>
</a>
</div>
</div>
Other approaches:
jquery change background color user scroll
http://jsfiddle.net/cgspicer/V4qh9/
How To Change A Page’s Background As The User Scrolls
Try this css:
-webkit-transition: background-color 1000ms linear;
see my fiddle i did quickly:
https://jsfiddle.net/kreza/4jfy1rhg/2/

Add new animation on transition end

I'm using a script to make content boxes slide from the top upon entry and then slides down upon exit.
It's almost working perfectly however, when you click on the button for content box one, then content box two, then back to one again, one comes in from the bottom instead of the top.
I think I understand why this is happening (because the code runs all in one hit, and thus instead of going from below the viewport, to above the viewport and then into view, it just goes from below into view) but can't figure out how to make it always come in from the top.
HTML:
<div class="slidey slidey1 enter">
Content Box 1
</div>
<div class="slidey slidey2">
Content Box 1
</div>
<div class="slidey slidey3">
Content Box 1
</div>
CSS:
.slidey { top:-100% }
.enter { top:0; transition: all 0.7s ease-in-out; }
.exit { top:100%; transition: all 0.7s ease-in-out; }
jQuery:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".changer").click(function(){
if ($(".slidey" + $(this).data("slidey")).hasClass("enter")) {
return false
} else {
$(".slidey").removeClass("exit");
$(".slidey.enter").addClass("exit").removeClass("enter");
$(".slidey" + $(this).data("slidey")).addClass("enter");
$(".changer").removeClass("link_change");
$(".changer" + $(this).data("slidey")).addClass("link_change");
return false;
}
});
});
</script>
The page is no longer available to be viewed.
After adding a class your should assign a "transitionend" listener like i.e:
$(".myElement").addClass("transitionClass").on("transitionend", function() {
// Transition ended.
// Do more stuff.
});
I recreated and simplified your HTML, CSS to create this example, so you might want to ignore that part, but focus on the jQ code. Should work even on your page out of the box.
$(document).ready(function(){
var $slides = $(".slidey");
$(".changer").click(function( e ){
e.preventDefault(); // Instead of return false;
var num = $(this).data("slidey");
var $target = $(".slidey"+ num);
$(".enter").not($target) // (not the already active one)
.removeClass("enter") // remove unwanted classes
.addClass("exit") // make it go to bottom
.on("transitionend", function(){ // snap it back to -100% top...
$(this).removeClass("exit"); // by removing the exit class.
});
$target.addClass("enter"); // Animate current down into view
// UL links
$(".changer").removeClass("link_change");
$(this).addClass("link_change");
});
});
*{margin:0;}
html, body{height:100%;}
body{overflow:hidden;}
#navbar{
position:absolute;
bottom:130px;
right:130px;
}
#navbar ul {list-style:none;}
.link_change{
color:fuchsia;
}
.slidey {
position:absolute;
width:50%;
height:90vh;
background:#ddd;
top:-100%;
}
.enter {
top:0;
transition: all 0.7s ease-in-out;
}
.exit {
top:100%;
transition: all 0.7s ease-in-out;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="navbar">
<ul id="navlinks">
<li class="changer changer1 link_change" data-slidey="1">home</li>
<li class="changer changer2" data-slidey="2">profile</li>
<li class="changer changer3" data-slidey="3">message</li>
</ul>
</div>
<div class="slidey slidey1 enter">Content Box 1</div>
<div class="slidey slidey2">Content Box 2</div>
<div class="slidey slidey3">Content Box 3</div>

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();
});

Categories