I am trying to fade in three separate lines of text, each one delayed slightly later than the last. I have discovered how to fade a single line, and how to delay a single line, but whatever I try cannot combine the two. All the JS research is for .fadeIn('slow') for button selectors and whatever tried doesn't work with the code below . Any advice appreciated.
function showText(id,delay){
var elem=document.getElementById(id);
setTimeout(function(){elem.style.visibility='visible';},delay*1000)
}
window.onload = function(){
showText('delayedText1',1);
showText('delayedText2',2);
showText('delayedText3',3);
showText('delayedText4',4);
}
<h1 id="delayedText1" style="visibility:hidden">First line fades in</h1>
<h1 id="delayedText2" style="visibility:hidden">slightly later this fades in</h1>
<h1 id="delayedText3" style="visibility:hidden">and last this line fades in</h1>
http://jsfiddle.net/k4h94Lob/1/
If you think you'll be doing more with animation in your project I highly recommend using Animate.css. Then how about not using JavaScript at all for the delay, and keep it real simple with some CSS?
<h1 id="delayedText1" class="animated fadeIn delay-1">First line fades in</h1>
<h1 id="delayedText2" class="animated fadeIn delay-2">slightly later this fades in</h1>
<h1 id="delayedText3" class="animated fadeIn delay-3">and last this line fades in</h1>
For example:
.delay-1 {
-webkit-animation-delay: 300ms;
-moz-animation-delay: none;
animation-delay: 300ms;
}
.delay-2 {
-webkit-animation-delay: 600ms;
-moz-animation-delay: none;
animation-delay: 600ms;
}
.delay-3 {
-webkit-animation-delay: 900ms;
-moz-animation-delay: none;
animation-delay: 900ms;
}
Demo JSFiddle
You can take advantage of CSS transitions for this.
Transitions need a numeric value to function, so you can use the opacity style, rather than visibility:
function showText(id, delay) {
var elem = document.getElementById(id);
setTimeout(function () {
elem.style.opacity = 1;
}, delay * 1000)
}
window.onload = function () {
showText('delayedText1', 1);
showText('delayedText2', 2);
showText('delayedText3', 3);
showText('delayedText4', 4);
}
h1{
opacity:0;
transition: opacity 0.8s;
}
<h1 id="delayedText1" style="">First line fades in</h1>
<h1 id="delayedText2" style="">slightly later this fades in</h1>
<h1 id="delayedText3" style="">and last this line fades in</h1>
Maybe this is what you are looking for: DEMO
$(document).ready(function () {
$('h1').each(function (line) {
$(this).delay((line++) * 1000).fadeIn();
});
});
UPDATE: Note that this will work for any number of lines. You can change fade in speed and delay time.
<script>
$(document).ready(function(){
var numOfLines = 3;
var delay = 1000;
var fadeTime = 1000;
for (i = 0; i < numOfLines + 1; i++) {
$('#delayedText' + i).delay(delay * i).fadeIn(fadeTime);
}
});
</script>
DEMO and Be sure to change
visibility:hidden with display:none;`
Related
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>
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>
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.
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);
I have this code:
<html>
<head>
<script type = "text/javascript" src = "jquery-1.7.1.js"></script>
<script type = "text/javascript" src = "jquery-ui-1.8.18.custom.min.js"></script>
</head>
<body>
<div id = "div" onclick = "Rotate()">
<img src="image.png" height="40" width="160">
</div>
<script type="text/javascript">
var x = 1;
function Rotate() {
var angle = (90 * x);
$("div").css("-moz-transform",
"rotate(" + angle + "deg)");
x++;
}</scipt></body></html>
when using Rotate() script, the div seems like been rotated, but when viewd with Firebug, I can see that div is still in the same position. Am I doing something wrong or I am using wrong thing for the task I'm trying to accomplish?
Edit:
Thanks for the responses! I set the background to yellow and it turned the yellow box but when clicking on the div name in Firebug it shows that the div is still in its original position.
It's definitely being applied to the <div>. Just add a width and a background color to the div to see that it's working correctly.
Here's an example I threw together that rotates on hover:
HTML:
<div id="awesome">
<img src="/img/logo.png">
</div>
CSS:
body {
margin: 100px;
}
div {
background: blue;
width: 200px;
-webkit-transition: all ease-in 1s;
-moz-transition: all ease-in 1s;
transition: all ease-in 1s;
}
div:hover {
background: yellow;
-moz-transform: rotate(30deg);
-webkit-transform: rotate(30deg);
transform: rotate(30deg);
}
Here's some more info how to use the css3 transform property
There is a jQuery plugin I found that has an example of doing exactly what you're doing, but in a cross-browswer way. Check out:
https://github.com/heygrady/transform
This plugin let's you do things like this:
$('div').click(function() {
$(this).animate({rotate: '+=45deg'});
});
Edit:
Hey, here's a slightly cleaned up version of your original that works fine:
var x = 1;
$("#box").click(rotate);
function rotate() {
var angle = (90 * x);
$(this).css("-moz-transform", "rotate(" + angle + "deg)");
x++;
if (x > 4) x = 0;
}
http://jsfiddle.net/UdYKb/1/
The reason firebug doesn't show the change is because of the spec, which says: "the transform property does not affect the flow of the content surrounding the transformed element." http://dev.w3.org/csswg/css3-transforms/
Look at this example with 3 rotating pics
HTML:
<div id = "div">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
<img src="http://dummyimage.com/100" class="rp" data-rotate="0">
</div>
JAVASCRIPT:
$().ready(function() {
$(".rp").click(function() {
var rot = (parseInt($(this).attr("data-rotate"))+90)%360;
$(this).attr("data-rotate",rot);
$(this).css("-webkit-transform", "rotate("+rot+"deg)");
$(this).css("-moz-transform", "rotate("+rot+"deg)");
});
});
I Save the last rotation in the attribute data-rotate. Please read about CSS Selectors if you do not understand why using .rp :) Hope it helps.
PS: I used the Google Chrome css attribute -webkit-transform too :)