This might be a dumb question but I can't get this super simple script to work.
I need a button that will reduce opacity by .1. every time it is clicked.
I've tried all of these.
x.style.opacity-.3; //This doesn't work. Doesn't do anything.
x.style.opacity=.3; //This gives me an opacity of .3.
x.style.opacity-=.3; //This gives an opacity of 0. Why?
x.style.opacity--; //This will give opacity of 0 as expected.
I even tried this:
var timesTen = x.style.opacity*10;
timesTen--;
timeTen/10;
x.style.opacity=timesTen; // This gives opacity of 0;
I would expect the answer to this problem to have something to do with a lack of understanding of the operators. But I've looked trough tons of arithmetic tutorials and they all seem full of integer examples that work perfectly fine for me. I've even copy pasted some of them and changed the numbers only to find that they stop working. I'm sorry if this is a noob question (As I am sure it is). Thank you
When I tested, you have to set opacity first, then you can read it to change it.
<div id="x" style="opacity:1.0">Hello</div>
x.style.opacity -= 0.3;
Because the above is not part of a standard (nor works in Firefox,) write as follows:
document.getElementById("x").style.opacity -= 0.3;
In the case of adding to the opacity, parseFloat is necessary, because string concatenation will happen otherwise. Or write -= -0.3 :)
x.style.opacity = parseFloat(x.style.opacity) - 0.1;
Why do it so difficult?
It doesn't work because the x.style.opacity property doesn't exist at this time, it is just applied thanks to css. Here is a workaround:
HTML:
<div id="t" style="background: black; opacity: 1;">Hello</div>
<div id="c" style="background: black;">Hello</div>
JS:
document.getElementById( 't' ).onclick = function() {
// This works
this.style.opacity = this.style.opacity - 0.1;
};
document.getElementById( 'c' ).onclick = function() {
var opacity = this.style.opacity;
// If the property exists, just decrement it
if ( opacity ) {
opacity -= 0.1;
}
// Else, set it (it will only be set once)
else {
opacity = 0.9;
}
};
Demo: http://jsfiddle.net/Ralt/xDFBY/
Related
I am making a function to animate elements in the DOM. Everything works, except for one thing.
Transitions are only working while the element has the css property that has to be animated. For example, I want to slowly fade out an element (opacity 1 to opacity 0). This works only of I apply the opacity property manually. So:
<div class="header-logo" id="id" style="opacity: 1;">Logo</div>
works with the following code:
animate(css) {
if(this !== undefined && css) {
this.css = css;
}
let start = performance.now();
requestAnimationFrame(function animate(time) {
let timeFraction = (time - start) / this.duration;
if( timeFraction > 1) timeFraction = 1;
let timing = this.timer(timeFraction); //Different timers for different easing (like ease-in-out)
this.draw(timing);
if (timeFraction < 1) {
requestAnimationFrame(animate.bind(this));
}
}.bind(this));
}
draw(timing) {
for(let property in this.css) {
this.element.style[property] -= timing * (this.element.style[property] - this.css[property]);
}
}
But if I don't apply the opacity: 1;, the code doesn't animate.
My concrete question
How can I check whether an element has the to be animated style property? And if it doesn't have the property, how can I apply (dynamically) the to be animated property (so without setting it by hand in the css sheet or inline)?
How can I check whether an element has the to be animated style
property?
To check if the opacity is actually 1, set manually or otherwise:
document.getElementById("id").style.opacity === "1"
To check if the opacity is effectively rendered by the browser as being 1:
document.getElementById("id").style.opacity === "" || document.getElementById("id").style.opacity === "1"
To check styles that are set with CSS:
window.getComputedStyle(document.getElementById("id")).opacity === "1"
how can I apply (dynamically) the to be animated property (so without
setting it by hand in the css sheet or inline)?
document.getElementById("id").style.opacity = "1"
As a final remark: be aware that there are a lot of great libraries doing all this work for you. A couple are:
Jquery (although this gives you a lot more than just animations)
D3 (awesome but can be a steep learning curve for a start)
Dynamicsjs (smaller and more specific for animations, but not a very big community behind it)
Trying to do a simple fade in using the opacity property of an h1 element. I'm learning javascript, so would like to try this using plain javascript (yes, I know it is much easier using jQuery).
Pasting only relevant snippets:
<body onload="fadeIn()">
...
<div class = "container">
<div class = "row">
<div class = "col-md-3">
<img class = "img-responsive" src="icons/Website_Logo.png">
</div>
<div class = "col-md-9 page-header">
<h1 id="welcomeHeader" style="opacity:0">
Welcome to the world!
</h1>
</div>
</div>
</div>
...
<script>
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = (function () {
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
</script>
</body>
Help is much appreciated! Thanks!
jsFIDDLE
You need to call the setInterval function first in order to invoke a timer. Rest is fine. Here is a working fiddle
Code Snippet:
function fadeIn() {
var el = document.getElementById("welcomeHeader");
var op = parseFloat(el.style.opacity);
var timer = setInterval(function () {
console.log('here');
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
}
You need to change your function to use setInterval like so:
var timer = setInterval(function () { // notice the setInterval added.
if(op >= 1.0)
clearInterval(timer);
op += 0.1;
el.style.opacity = op;
}, 50);
Notes:
I give you this answer to help you LEARN javascript as you mentioned, otherwise,
it would be better done with pure css of course.
Also, make sure your opacity is set to 0 in your css as a starting point.
You don't need a timer for this - all you need to do is change the class. Here's an example:
the CSS:
element{
/* whatever styles you have */
}
element_faded{
transition: opacity .5s;
opacity: 50%; /* or whatever values you want */
}
the javascript
var element = document.getElementById('element');
// in order to trigger the fade, just change the class
element.className = "element_faded";
In the transition will happen between the values of the original and new class, so if you want a fade-in, have the original opacity be 0% and the new one be 100% or something higher than zero, depending on what you want the final opacity to be. Also, remember that the transition characteristics are determined by the transition attribute in the new class.
Doing this without CSS will just make things more complicated unless you need to do something more sophisticated than just plain fading in or out. If that's the case, then use setInterval or perhaps even something like requestAnimationFrame if you're feeling adventurous.
Honestly, this isn't really the kind of thing you need to learn when first learning javascript. Eventually this will be really easy once you get some confidence under your belt doing things that work more easily in javascript (setTimeout and the like can have their own weird caveats). Try to set a meaningful, practical goal and fulfill it first, using whatever mix of javscript/css/html you can and you'll soon have the basics down well enough to find things like this obvious.
I want the javascript code to show a div in slow motion.
function showDiv(divID)
{
if(document.getElementById(divID).style.display=='none')
{
document.getElementById(divID).style.display='block';
}
}
Here div appears, but not in slow motion. Can anyone help ??
Thanks in advance
Dev..
There is no need of jQuery in this atall , its just a basic I am using your function to explain how thats done.
function showDiv(divID)
{
if(document.getElementById(divID).style.display=='none')
{
document.getElementById(divID).style.display='block';
}
}
What your function is doing is basically removing the whole Element from BOX Model ( the toggle of block and none removes the element totally from the BOX Model so it doesnt occupies any space or anything , this but may / may not cause some layout issues );
Now to animate it in slow motion you need a timing function.
a timing function is a simple mathematical function which gives the value of the property ( opacity in your case ) for a given time or depending on other parameters .
Other then that you also need to use properties like opacity in order to fade it (Opacity is a CSS property that defines the transparency of an element and its childrens )
So let us begin with a very basic show / hide using setTimeout Function in JS.
function getValue(t,dir){
if( dir > 0){
return 0.5*t; /* Y = mx + c */
}else{
return 1-(0.5*t);
}
/*
Here the slope of line m = 0.5.
t is the time interval.
*/
}
function animator(divID){
if(!(this instanceof animator)) return new animator(divID); /* Ignore this */
var Node = document.getElementById(divID),
start = new Date.getTime(), // The initiation.
now = 0,
dir = 1,
visible = true;
function step( ){
now = new Date.getTime();
var val = getValue( now - start,dir)
Node.style.opacity = val;
if( dir > 0 && val > 1 || dir < 0 && val < 0 ){
visible = !(visible*1);
// Optionally here u can call the block & none
if( dir < 0 ) { /* Hiding and hidden*/
Node.style.display = 'none'; // So if were repositioning using position:relative; it will support after hide
}
/* Our animation is finished lets end the continous calls */
return;
}
setTimeout(step,100); // Each step is executated in 100seconds
}
this.animate = function(){
Node.style.display = 'block';
dir *= -1;
start = new Date.getTime();
setTimeout(step,100);
}
}
now you can simply call the function
var magician = new animator('divName');
then toggle its animation by
magician.animate();
Now playing with the timing function you can create whatever possibilities you want as in
return t^2 / ( 2 *3.23423 );
or even higher polynomial equations like
return t^3+6t^2-38t+12;
As you can see our function is very very basic but it explains the point of how to make animations using pure js . you can later on use CSS3 module for animation and trigger those classes with javascript :-)
Or perhaps write a cross browser polyfill using CSS3 where available ( it is faster ) , and JS if not :-) hope that helps
Crossbrowser solution (without jQuery) :
HTML :
<div id="toChange" ></div>
CSS :
#toChange
{
background-color:red;
width:200px;
height:200px;
opacity:0;//IE9, Firefox, Chrome, Opera, and Safari
filter:alpha(opacity=0);//IE8 and earlier
}
Javascript :
var elem=document.getElementById("toChange");
var x=0;
function moreVisible()
{
if(x==1)clearInterval(t);
x+=0.05;
elem.style.opacity=x;
elem.style.filter="alpha(opacity="+(x*100)+")";
}
var t=setInterval(moreVisible,25);
Fiddle demonstration : http://jsfiddle.net/JgxW6/1/
So you have a few jQuery answers but I wouldn't recommend jQuery if fading the div is all you want.
Certainly jQuery makes things easier but it is a lot of overhead for a single simple functionality.
Here is someone that did it with pure JS:
Fade in and fade out in pure javascript
And a CSS3 example:
How to trigger CSS3 fade-in effect using Javascript?
You can use jquery $.show('slow') for the same, if you want to do the same without using jquery then you might be required to code something to show the effect yourself, you may have a look at source of jquery's show function http://james.padolsey.com/jquery/#v=1.6.2&fn=show . alternatively , you can also use fadein() for fade in effect in jquery
Yes you can do it using Jquery. Here is my sample example
$('#divID').click(function() {
$('#book').show('slow', function() {
// Animation complete.
});
});
For details clik here
Thanks.
I tried doing a JS fade effect with the setTimeout() function and it appeared to work to some extent, but I can't seem to figure out what's wrong with the code below:
<html>
<head>
<title></title>
<script type="text/javascript">
function FadeEffect(n)
{
var i=1;
fade = document.getElementById("box");
if (n===1)
{
fade.style.opacity=i/10;
i++;
setTimeout("FadeEffect(1)",50);
if (fade.style.opacity=1)
{
var i=1;
}
}
else if (n===0)
{
fade.style.opacity=1-i/10;
i++;
setTimeout("FadeEffect(0)",50);
if (fade.style.opacity=0)
{
var i=1;
}
}
}
</script>
<style type="text/css">
#box{
width: 200px;
height: 50px;
border: 1px solid black;
background-color: #ccc;
opacity: 0;
}
</style>
</head>
<body>
<div onMouseOver="FadeEffect(1)" onMouseOut="FadeEffect(0)" id="box">Menu</div>
</body>
</html>
Edit: updated the code with setTimeout() functions.
There are two problems with the function that I can see.
First, your if statements both do an assignment rather than a comparison. You are saying if (n=0) (one =, assignment) when you should be saying if (n===0) (three ===, comparison, or you can use two == for a type-converting comparison).
Second, using a for loop to repeatedly change the style isn't going to fade because the browser doesn't update the display at the same time as your code is executing - essentially it uses the same thread for display and for JavaScript. So the page will be updated after the function exits. You need to give the browser a chance to update after each iteration by using setTimeout() - something like:
function fadeEffect(element,startValue,target,delay){
element.style.opacity = startValue;
if (startValue < target)
startValue = Math.min(startValue + 0.1, target);
else
startValue = Math.max(startValue - 0.1, target);
if (startValue != target)
setTimeout(function(){fadeEffect(element,startValue,target,delay);}, delay);
}
<div onMouseOver="fadeEffect(this, 1, 0, 100);"
onMouseOut="fadeEffect(this, 0, 1, 100);" id="box">Menu</div>
Demo: http://jsfiddle.net/hLQ6y/2/
EDIT: Note that this code doesn't cope all that brilliantly if you move the mouse in and out too quickly, i.e., if you trigger the fade in before the fade out has finished. (You can see what I mean in my jsfiddle.) You can solve this by saving the return from .setTimeout() and calling .clearTimeout() if required. Given that I've already covered the essence of the question I'll leave the fine-tuning as an exercise for the reader...
UPDATE: Your updated code has introduced new if statements with the same assignment-instead-of-comparison problem. Also it is calling setTimeout() forever - you should do that conditionally as in the answers Pointy and I gave. Also you seem to be relying on the variable i which, as a local variable, will not retain its value between calls - you could make it a global, but better to manage it as a parameter like I did or as a local variable in an outer function like Pointy did.
The problem is that all those changes to the style will happen before the browser bothers to update the display. What you need to do is space out the changes over a much, much longer period of time using "setTimeout()".
function fadeIn() {
function increment() {
box.style.opacity = Math.min(1.0, (opacity += 0.1));
if (opacity < 1.0) {
setTimeout(increment, 100);
}
}
var box = document.getElementById('box'), opacity = 0;
box.style.opacity = opacity;
setTimeout(increment, 100);
}
edit — Here is a jsfiddle to demonstrate.
If you want it to fade, you need to create a function that sets the opacity -0.1 or +0.1 and then calls itself with setTimeout in 100ms (or fewer). If you don't let the script wait, it will be too fast and immediately set the opacity to 1.0.
Anyways, you could do this a lot easier using jQuery.
It's my second question of the day related to the same problem, so I apologize for that.
I was able to put together a function to "fade out" an element, and it works just fine, my problem is that when I try to reverse it, so the element "fades in" it does not work.
I've tried to change the obvious, but I can't understand what I'm doing wrong.
My code so far is as follows:
Given I have a "div" like so:
<div id="test" style="width:200px; height:200px; display:block; opacity:1; background-color:red;"></div>
The JavaScript function that I'm using to fade it out is:
var getElement = document.getElementById('test');
function fadeOut(elem, speed){
if(!elem.style.opacity){
elem.style.opacity = 1;
}
var desvanecer = setInterval(function(){
elem.style.opacity -= .02;
if(elem.style.opacity < 0){
clearInterval(desvanecer);
}
}, speed / 50);
}
fadeOut(getElement, 500);
Could somebody take a look at this and let me know what I'm doing wrong, all I want to do is "FADE IN" an element to an opacity equal to "1".
By the way, I can't use jQuery, however I'm eager to learn this way.
Thanks
My attemp to reverse the function is as follows:
var getElement = document.getElementById('test');
function fadeIn(elem, speed){
if(elem.style.opacity){
elem.style.opacity = 0;
}
var desvanecer = setInterval(function(){
elem.style.opacity += .02;
if(elem.style.opacity > 1){
clearInterval(desvanecer);
}
}, speed / 50);
}
fadeIn(getElement, 500);
setInterval runs in a global scope, so you need to define the timer relative to the window.
You can't concatinate the string value returned from the style property and
expect a number- you'll get '0.02.02.02.02'
Coerce a number out of the string, then add the .02.
It will work in some browsers, but IE before 9 needs a different expression
to set and read opacity.
function fadeIn(elem, speed){
if(elem.style){
elem.style.opacity= '0';
}
window.fadetimer= setInterval(function(){
elem.style.opacity= +(elem.style.opacity)+.02;
if(elem.style.opacity> 1){
clearInterval(fadetimer);
}
},
speed);
}