Fade effect attribute/function in javascript custom script? - javascript

I need to add a fade effect on my javascript function
Javascript
<script type="text/javascript">
window.onload=function() {
loginBtn = document.getElementById('loginBtn');
fader = document.getElementById('login_fader');
login_box = document.getElementById('login_box');
closebtn = document.getElementById('closelogin');
loginBtn.onclick=function(){
fader.style.display = "block";
login_box.style.display = "block";
}
closebtn.onclick=function() {
fader.style.display = "none";
login_box.style.display = "none";
}
}
</script>
HTML
<div id="login_fader"> </div>
<div id="login_box">
<table class="table-login">
<th>Login or Register</th>
<th><a id="closelogin">X</a></th>
<tr>
<td>Login</td>
<td>Register</td>
</tr>
</table>
</div>
CSS
<style type="text/css">
#loginBtn {
float: right;
margin-top: -6%;
cursor:pointer;
}
#login_fader {
background: black;
opacity: .5;
-moz-opacity: .5;
-filter: alpha(opacity=50);
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 5;
display: none;
}
#login_box {
width: 320px;
height: 200px;
border: 1px white solid:
background: #5a5a5a;
position: fixed;
top: 25%;
left: 35%;
z-index: 10;
display: none;
}
.table-login {
background: #FFF;
border-radius: 8px;
box-shadow: 0 0 5px 2px;
opacity: 0.95;
}
#closelogin {
float:right;
cursor:pointer;
}
</style>
Js fiddle
http://jsfiddle.net/U3n4j/
I have tried using the transition properties from css3 and tried applying both to login_box and login_fader.
I found some functions on the net but don't know how to link them to my already made function and i was thinking if there are any properties directly that i can link them to my function.

Proper way to fade in a static box in css3 and js 1.7 ++
This is a example using only webkit and modern javascripts classList.add
but you can add the other prefixes.-moz,-ms,-o
in this example i show only the animation.
css
.box{
width:100%;
height:100%;
position:fixed;
left:0;top:-100%;/*notice TOP -100%*/
opacity:0;
-webkit-transition:opacity 700ms ease,top 0 linear 700ms;/*notice TOP delay*/
background-color:rgba(0,0,0,0.7);
}
.box.active{
-webkit-transition:opacity 700ms ease,top 0 linear 0;
/*top transition not needed but could help to understand*/
top:0;
opacity:1;
}
js
function show(){
box.classList.add('active');
}
function hide(){
box.classList.remove('active');
}
var box=document.getElementsByClassName('box')[0],
button=document.getElementsByTagName('button')[0];
button.addEventListener('click',show,false);
box.addEventListener('click',hide,false);
DEMO
http://jsfiddle.net/RAu8Q/ not working anymore
http://jsfiddle.net/RAu8Q/17/ new syntax 10-2015
if you have any questions just ask.

I can't tell exactly what effect you're trying to achieve, but if you're going to use CSS transitions, then you need to be transitioning between numerical properties. I.e., you can't expect a fade to occur simply by transitioning from display:block to display:none. You'd want to use opacity instead.

First of all, don't try to use css transitions in conjunction with display property, that won't work! Instead, try transitioning other properties. Let's take opacity for instance (we'll simulate display: none/block functionality by setting opacity to 0/1)
Secondly, set the start value for opacity to 0 on the desired HTML element (the one you'd like to animate). Specify which property to animate (opacity in our case):
transition: opacity 1s;
-moz-transition: opacity 1s;
-webkit-transtion: opacity 1s;
When the login button is clicked, set opacity to 1:
loginBtn.onclick=function() {
fader.style.opacity = 1;
login_box.style.opacity = 1;
}
When the close button is clicked, set opacity back to 0:
closebtn.onclick=function() {
fader.style.opacity = 0;
login_box.style.opacity = 0;
}
Link to fiddle.

I believe that what you want to do needs css animations. So just create an animation class that fades out the target element and apply it after the user logs in.
#keyframes fadeOut {
from: {
opacity:1;
},
to: {
opacity:0;
}
}
then use apply it on the class
.fadeOut {
animation:fadeOut 0.25s forwards;
}
EXAMPLE
http://jsfiddle.net/zgPrc/

Related

Making hidden element display itself and then move using transition

How do I make fix this code so the two element first becomes no longer hidden and then moves however much right smoothly using the transition. It works when the element doesn't begin hidden, but when it is, it just jumps to the end spot. How do I make this work without taking out hidden and reducing the elements width to zero.? Thanks.
var one = document.getElementById('one');
var two = document.getElementById('two');
function myFunct() {
two.style.display = 'flex';
two.style.right = '70%';
}
#one {
position: absolute;
width: 300px;
height: 100px;
border: 1px solid red;
}
#two {
position: absolute;
display: none;
min-width: 5px;
height: 100%;
transition: 1.5s;
-webkit-transition: 1.5s;
-moz-transition: 1.5s;
-ms-transition: 1.5s;
background-color: green;
right: 0px;
}
<div id = 'one' onclick = 'myFunct()'>
<div id = 'two'></div>
</div>
Use opacity: 0 first instead of display: none and using translateX instead of right will be better.
I also recommend AnimeJS since it makes animations and transitions a lot easier if you are using a bunch of them.
Try manipulating the visibility property instead of display:
function myFunct() {
two.style.visibility = 'visible';
two.style.right = '70%';
}
#two {
visibility: hidden;
display: flex;
...
}

How to end CSS transition with jquery or js?

I want to end my css transition with jquery or js. I don't mean pause, I want to end them, as if they became 100% done. I have css transitions and not animations.
The properties I am using transition on are top and left, and it is a position absolute element.
You can simply override the transition-property rule to none.
#el {
position: relative;
left: 0;
top: 25px;
width: 50px;
height: 50px;
transition: all 5s linear;
background: red;
}
body:hover #el{
left: calc(100vw - 50px);
}
button:active + #el {
transition-property: none;
}
:root,body{margin:0}
<button>stop transition</button>
<div id="el"></div>
Now how you trigger this is up to you, it can be using a special class, or any other condition.
Hello your question is kinda ambiguous.
if you are using transition instead of animation you can control the flow of it in the same css example :
transition: background-color .2s linear 0s; /*Standard*/
If you want to interrupt the transition with JS you can assign other Css valor to an different class name or property when some action you want is triggered.
.normal{
transition: background-color .2s linear 0s; /*Standard*/
}
[stop = yes] {
background: black;
}
document.body.addEventListener('mouseover', function(e){
e.stopPropagation();
if(someting you want){
document.queryselector(".normal").setAttribute("stop","yes");
}
else{
document.queryselector(".normal").setAttribute("stop","no");
}
},false);
if something you want were triggered then the atribute will be set to the no
transition and this also cut off the running one.
$('.toggle-animation').click(function(){
$('.element').stop(true).toggleClass('animating');
});
.element{
top: 0px;
left: 0px;
width: 100px;
height: 100px;
position:relative;
background: red
}
.animating{
top: 100px;
left: 100px;;
transition: all 5s linear 0s;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="element"></div>
<button type="button" class="toggle-animation">Click me</button>

CSS position transition not working at all when set with JavaScript

I want to do the following things:
show a div element;
move it to a an initial position;
set transition properties;
move it to the target position using CSS transition.
A minimal example:
function bla() {
/*
var obj = $('#box');
obj.css("left", "200px");
obj.css("display", "initial");
obj.addClass("trans");
obj.css("left", "500px");
*/
var elem = document.getElementById('box');
elem.style.left = "200px";
elem.style.display = "initial";
elem.className = "box trans";
elem.style.left = "500px";
}
#btn {
position: fixed;
top: 60px;
left: 0px;
width: 50px;
height: 50px;
background-color: #FEDCBA;
}
.box {
display: none;
position: fixed;
top: 0px;
left: 0px;
width: 50px;
height: 50px;
background-color: #ABCDEF;
}
.box.trans {
-webkit-transition: left 2s;
-moz-transition: left 2s;
transition: left 2s;
}
<div id="box" class="box"></div>
<div id="btn" onclick="bla()">click here</div>
JSFiddle.
It does not work at all. What is wrong?
If I set the element initially visible, I get a smooth transition starting from the origin left:0 which is totally strange because I assign elem.style.left = "200px"; before I actually add the transition properties...
You should avoid using style in javascript, just switch class years put all your animation in your css file.
You can't put transition together with display: none;, you have to use opacity: 0; instead.
function bla()
{
var obj = $('#box');
obj.toggleClass("trans");
}
#btn
{
position:fixed;
top:60px;
left:0px;
width:50px;
height:50px;
background-color:#FEDCBA;
}
.box
{
opacity: 0;
position:fixed;
top:0px;
left:0px;
width:50px;
height:50px;
background-color:#ABCDEF;
-webkit-transition: transform 2s,opacity 2s;
transition: transform 2s,opacity 2s;
}
.box.trans
{
opacity: 1;
-ms-transform: translate(500px,0); /* IE 9 */
-webkit-transform: translate(500px,0); /* Safari */
transform: translate(500px,0);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box" class="box">
</div>
<div id="btn" onclick="bla()">
click here
</div>
DOM changes don't take effect until they can be rendered. Javascript is single-threaded (meaning you cannot run two pieces of code simultaneously), and run on the same thread as the render cycle.
Because of this, the renderer cannot fire unless you give it time to look at the new state of the DOM by deferring execution of your JS code (using setTimeout or requestAnimationFrame). So unless you give the browser time to render, only the final value before the renderer gets to look at the DOM is what matters.
This answer to a previous question goes over the exceptions to the rule.
Here's an updated version of your jsfidde that uses requestAnimationFrame to get around the issue.
I can not explain why. Maybe someone could, I'd be curious too, but with a time-out works.
setTimeout(function(){
elem.style.left = "500px";
},1);
It is probably too fast assigning properties left 500 and the transition to record the old location 200?
https://jsfiddle.net/StepBaro/s82rj48q/2/
It's because you have the div hidden, so it first need to display it and then add the transition, that is why it needs the delay.

Trigger opacity transition on mouse in and out

I want to trigger a opacity transition. If an element is hovered by the cursor, the cursor shall fade out, change its background-image and then fade in again. I wanted to achieve that by adding and removing a css class. It's not working, what is wrong?
js fiddle
HTML
<div class="wrapper">
<div class="cursor">
</div>
<div id="grey">
</div>
</div>
CSS
.wrapper {
width: 100%;
height: 100%;
background-color: lightgrey;
padding: 60px;
cursor: none;
}
#grey {
width: 100px;
height: 100px;
background: grey;
}
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: opacity .3s; /* Safari */
transition: opacity .3s;
}
.red {
background: red;
opacity: 1;
}
.green {
background: green;
opacity: 1;
}
JS
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
$('.cursor').removeClass('green').addClass('red');
}else{
$('.cursor').removeClass('red').addClass('green');
}
});
DEMO HERE
Ok, here you go. You need to keep track of 2 things here which you already achieved partially and also wait for fadeOut to complete and add a callback for adding and removing respective class
Whether cursor has entered element
Whether cursor has left element
Below is how you could actually do it.
var entered=false;//global variables to show the position of cursor
var left=false;
$('.wrapper').on('mousemove', function(e){
$('.cursor').css('left', e.clientX-10).css('top', e.clientY -10);
if ($.contains($('.wrapper')[0], e.target)){
if(!entered)
{
//just to do it once and not on every mousemove you need to check here whether
//it has already entered and moving inside the element
entered=true;
left=false;//to check the vice versa operation
$('.cursor').fadeOut('fast',function(){
//callback function after fadeOut completes
$(this).removeClass('green').addClass('red');
}).fadeIn('fast');
}
}else{
if(!left)
{
left=true;
entered=false;
//same goes here too
$('.cursor').fadeOut('fast',function(){
$(this).removeClass('red').addClass('green');
}).fadeIn('fast');
}
}
});
you have to change background color , not opacity ( opacity is always 1 )
CSS
.cursor {
position: fixed;
width: 20px;
height: 20px;
pointer-events: none;
opacity: 0;
-webkit-transition: background-color .3s; /* Safari */
transition: background-color .3s ;
}
.red {
background-color: red;
opacity: 1;
}
.green {
background-color: green;
opacity: 1;
}
So you said your question is wrong, it is "no, I just made it easier for hier, in reality it is an background image" - so you transition between two background-images.
Here is how you do it:
You can not do it with CSS transition in ONE element/div
You will have to make two divs wich one background each
Increase the zIndex of the div you want to fade out in by one
Fade out div, while the new div stays at opacity: 1

CSS3 Animation: Forwards fill not working with position and display on Safari

So, I have created a CSS3 animation that is supposed to fade out an element by setting its opacity from 1 to 0 and at the last frames change the position to absolute and display to none. But on Safari it will only maintain the opacity, position and display are not set to the final values.
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
display: block;
position: relative;
}
99% {
opacity: 0;
position: relative;
}
100% {
opacity: 0;
display: none;
position: absolute;
}
}
It seems to work on Chrome but not on Safari (I tried version 8). Apparently, position and display do not work properly with animation-fill-mode: forwards...
JSFiddle: http://jsfiddle.net/uhtL12gv/
EDIT For Bounty: I am aware of workarounds with Javascript and transitionend events. But I am wondering why Browsers lack support for this? Does the specification state that fillmode forwards doesnt apply to some attributes like position or is this a bug in the browsers? Because I couldnt find anything in the bug trackers.. If anybody has some insight, I would really appreciate it
As Suggested in the comments, you can adjust the height.
EDIT: Animation Reference Links Added.
Display property is not animatable.
Position property is not
animatable.
List of all CSS properties and if and how they are
animatable.
$('.block').click(function() { $(this).toggleClass('active') });
#-webkit-keyframes impressum-fade-out {
0% {
opacity: 1;
}
99% {
opacity: 0;
}
100% {
opacity: 0;
height:0;
}
}
.block {
width: 100px;
height: 100px;
background: blue;
}
.block2 {
width: 100px;
height: 100px;
background: red;
}
.block.active {
-webkit-animation-name: impressum-fade-out;
animation-name: impressum-fade-out;
-webkit-animation-duration: 500ms;
animation-duration: 500ms;
-webkit-animation-fill-mode: forwards;
animation-fill-mode: forwards;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block2"></div>
I would suggest you the cross-browser solution based on CSS3 Transitions and transitionend event:
JSFiddle
$('.block').one('click', function() {
var $this = $(this);
$this.one('webkitTransitionEnd transitionend', function() {
$this.addClass('block_hidden');
$this.removeClass('block_transition');
});
$this.addClass('block_transition');
});
.block {
width: 100px;
height: 100px;
background: blue;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.block_2 {
background: red;
}
.block_transition {
opacity: 0;
}
.block_hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="block"></div>
<div class="block block_2"></div>

Categories

Resources