I've made a simple box with CSS, I'm trying to fade it by dynamically changing it's opacity using the setInterval object.
http://jsfiddle.net/5gqRR/7/
CSS
#box {
margin:0px auto;
margin-top:10px;
height:50px;
width:50px;
background:black;
}
JAVASCRIPT
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade=setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
The problem is that the "-=" operator starts subtracting the opacity from 0 instead of 1.
Can someone please explain why this happens?
Your check about the opacity should be inside the loop.
function select(id) {
return document.getElementById(id);
}
// Run at loading
window.onload = function () {
// Preload variables
var box = select('box'), opacity = 1, fade;
// Looping
fade = setInterval(function(){
// Calculate and applying opacity
opacity = Math.max( 0, opacity - 0.1 );
box.style.opacity = opacity;
// Stoping loop when box isn't visible
if ( !opacity )
clearInterval(fade);
},30);
};
​Demo: http://jsfiddle.net/5gqRR/8/
You can't set an onload event to div element. Instead of that you can do:
HTML
<div id="box"></div>
JavaScript
var fade;
function select(id) {
return document.getElementById(id);
}
function disBox() {
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);
if (select("box").style.opacity==0) {
clearInterval("fade");
select("box").style.display="none";
}
else {
select("box").style.display="block";
}
}
window.onload = (function() {
disBox();
})();
Demo
According to edit
select("box").style.opacity = 1; // add this line to set initial opacity
fade = setInterval(function(){
select("box").style.opacity-=0.1;
},300);
Related
How can I create the CSS animation below in JavaScript? I've looked all over Google, and tried multiple times to create this but I couldn't figure out how to do this.
#keyframes fadeIn {
0% {
opacity: 0;
}
100% {
opacity: 100;
}
}
To run this, I know I can use what is shown below, but I don't know how to create this animation. Can anyone help?
element.style.animation = "fadeIn 5s linear";
You can use javascript with transition to achieve it
// start frame
const start = {
opacity: 0
};
// end frame
const end = {
opacity: 1
};
const element = document.querySelector('span');
Object.assign(element.style, start);
element.style.transition = 'all 5s linear';
requestAnimationFrame(() => {
Object.assign(element.style, end);
});
<span>Lorem Ipsum</span>
What do you mean exactly with "Create in Javascript"? Without using CSS?
If so, you can use a simple interval to update the opacity of the element until it reached 0 or 100. Simple example:
let opacity = 0;
const fadeEl = document.getElementById("fadeInElementIdWithOpacity0");
const fadeInInterval = setInterval(() => {
if (opacity < 1) {
opacity = opacity + 0.1
fadeEl.style.opacity = opacity;
} else {
clearInterval(fadeInInterval);
}
}, 200);
You can first define this function with whatever amount of intervals that you want and then call it with any querySelector
function fadeIn(x) {
var fade = document.querySelector(x);
var opacity = 0;
var intervalID = setInterval(function() {
if (opacity < 1) {
opacity = opacity + 0.1
fade.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}, 200);
}
havnig this function in console and running fadeIn(".-logo") will fade in the stackoverflow's logo
I am new to javascript and I have done one image to fade in, but the second image wont fade in next.
See HTML and Javascript. With the use of pure HTML, CSS AND JS without keyframes for animation. No libraries or framework to use.
For HTML:
<div id="female" style="opacity: 0;">
<img id="fem" src="./images/female.png" onload="female()">
</div>
<div id="headline1" style="opacity: 0;">
<img id="t1" src="./images/headline1.png" onload="headline1()">
</div>
</div>
For JS code:
//FEMALE ANIMATION
function female () {
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById("female");
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}}
//HEADLINE 1 ANIMATION
function headline1 () {
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById("headline1");
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}}
Both the functions female() and headline1() assign their own functions to window.onload. This will cause the 2 functions impact each other.
You can use window.addEventListener instead of window.onload to solve this issue.
Considering that both your female() and headline1() functions are very similar, it is a good idea to use a single function with a parameter to specify the ID of the image to animate.
function animateImage(id, opacity) {
var intervalID = 0;
window.addEventListener('load', fadeIn);
function fadeIn() {
setInterval(show, 150);
}
function show() {
var body = document.getElementById(id);
opacity = Number(window.getComputedStyle(body)
.getPropertyValue("opacity"));
if (opacity < 1) {
opacity = opacity + 0.1;
body.style.opacity = opacity
} else {
clearInterval(intervalID);
}
}
}
I have this dive the toggle Hide / Show !! ... It works ok , but I would like to know how to add transition animation to the hide/show ?
this is my JS :
function myFunction() {
var x = document.getElementById("clock1");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none" ;
}
You cannot animate the display property. But you can animate the visibility or opacity property in css easily:
// main.html
<div id="clock1" class="hidden">...</div>
// main.css
#clock1 {
visibility: visible;
opacity: visible;
transition: visibility 0s, opacity 0.5s linear;
}
#clock1.hidden {
visibility: hidden;
opacity: 0;
}
// main.js
function myFunction() {
var x = document.getElementById("clock1")
if (x.classList.contains('hidden')) {
x.classList.remove('hidden')
} else {
x.classList.add('hidden')
}
}
Setting display to none will immediately hide the element, which means there is not opportunity for animation/transition of visibility over time.
Perhaps you could consider using opacity instead, to achieve this?
Add the following CSS:
#clock1 {
transition:opacity 1s;
}
Update your JS:
function myFunction() {
var x = document.getElementById("clock1");
// Update opacity rather than display
if (x.style.opacity === "0") {
x.style.opacity = 1;
} else {
x.style.opacity = 0;
}
}
Working jsFiddle here
I am doing some animation works with css keyframes.First i need to keep the element's opacity zero then after the animation is end then it would be one(1).I have wrote some jQuery codes and still not works.
Css codes
.slider_img {
position: absolute;
opacity: 0;
left: 24%;
top: 50vh;
animation-name: dropImg;
animation-duration: 2s;
animation-delay: 1s;
transform: translateY(-50%);
}
jQuery
$(window).ready(function() {
$('.slider_img').on("webkitTransitionEnd", function(){
$('.slider_img').css('opacity', 1);
})
});
What sould i do now
Assuming your animation starts when your page loads:
$(document).ready(function() {
var aDuration = parseInt($('.slider_img').css('animation-duration').slice(0, -1)) * 1000;
var aDelay = parseInt($('.slider_img').css('animation-delay').slice(0, -1)) * 1000;
var delay = aDuration + aDelay;
setTimeout(function() {
$('.slider_img').css('opacity', 1);
}, delay);
});
EDIT: Added the delay from animation-delay.
Your problem is that you are using the wrong event transitionend when you should be looking for animationend (plus of course you will need all the prefixes). For example:
$('.slider_img').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function() {
$('.slider_img').css('opacity', 1);
});
You could do something like:
$(window).ready(function() {
var sliderImg = $('.slider_img'),
delay = sliderImg.css('animation-duration').replace("s","") * 1000;
setTimeout(function(){
sliderImg.css('opacity', 1);
}, delay);
});
well its a fairly basic code for a slideshow in html using css and javascript.
this is the javascript part how can i add a fade in and fade out to this code without jquery
<script type="text/javascript">
var step = 0
var whichimage = 0
function slideit() {
if (!document.images)
return
document.getElementById('slide').src = slideimages[step].src
whichimage = step
if (step < 3)
step++
else
step = 0
setTimeout("slideit()", 5000)
}
slideit()
</script>
The simplest way would be to use CSS to animate element opacity:
var el = document.getElementById('e');
setInterval(function(){
el.className = el.className == '' ? 'show' : '';
}, 2000);
#e {display: inline-block; width: 50px; height: 50px; background: #afa; opacity: 0; transition: opacity 1s linear}
#e.show {opacity: 1}
<div id="e"></div>
In your case you'd have to set when the previous element fades out and when the new one fades in using setTimeouts. I could write you a more accurate code, but not without seeing the markup/the whole thing. This should be enough to get you started.