Trigger opacity transition on mouse in and out - javascript

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

Related

Is there a way to use css with an If/else condition?

I am making a memory game for school.
My issue right now is, you can spam click everything and everything will show.
whenever you have the wrong pair the cards make the class "red" and they turn red in the css code. But you're still able to click the other cards and a few turn back to normal again after 600ms, some just stay and don't turn back.
is it possible to use an if/else condition for css? If there are "red" cards, the pointer event for normal cards are none. You can play the game here and test the issue yourself: https://memory-20.815374.repl.co
Fixing it without If/else is fine too. Using if/else is just the first thing that comes in my head.
here is the code for CSS:
.card.clicked {
background-color: orange;
pointer-events: none;
}
.card.checked {
background-color: lightgreen;
visibility: hidden;
transition: visibility 0s linear 300ms, opacity 300ms;
}
.card.clicked img,
.card.checked img {
opacity: 1;
}
.card.red {
background-color: #f15f5f;
}
.card {
height: 120px;
width: 100px;
background-color: #ff5cbb;
border-radius: 10px;
display: grid;
place-items: center;
cursor: pointer;
transition: 0.3s all ease;
}
Here is the JavaScript code:
} else {
const incorrectCards = document.querySelectorAll(".card.clicked");
incorrectCards[0].classList.add("red");
incorrectCards[1].classList.add("red");
setTimeout(() => {
incorrectCards[0].classList.remove("red");
incorrectCards[0].classList.remove("clicked");
incorrectCards[1].classList.remove("red");
incorrectCards[1].classList.remove("clicked");
}, 600);

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>

Fade effect attribute/function in javascript custom script?

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/

css for fading overlaid video controls?

In some DVD/Video players, the controls for play/pause/volume/etc are overlaid on top of the video itself in a box. The controls fade in when you move the mouse, and then, after some delay, fades back out (so you can enjoy the video again).
I am wondering -- how to create this effect using CSS? Is there a way to reset the fade-out timer on events other than body mouse move?
Let's say we have the following HTML template:
<div class="player">
<div class="controls">Controls go here</div>
</div>
It is possible if you use CSS transition-delay: http://jsfiddle.net/teddyrised/7sBwA/
.player {
background-color: #333;
position: relative;
width: 100%;
height: 400px;
}
.controls {
background-color: rgba(0,0,0,.5);
border-radius: 5px;
color: #eee;
padding: 1em;
position: absolute;
left: 2em;
right: 2em;
bottom: 2em;
text-align: center;
pointer-events: none;
opacity: 0;
transition: opacity .5s ease-in-out;
transition-delay: 0;
}
.player:hover .controls {
pointer-events: auto;
opacity: 1;
}
.player:not(:hover) .controls {
transition-delay: .5s;
}
However, if you want better browser support, you should use JS instead.
When using jQuery, you can exploit the .delay() method when using jQuery effects, such as .fadeOut() in our example: http://jsfiddle.net/teddyrised/g7kge/
JS:
$(document).ready(function(){
$(".player .controls").hide();
$(".player").hover(
function(){
// Mouse enters. Fade in controls
$(this).find(".controls").fadeIn();
},
function(){
// Mouse leaves. Delay controls fade out by 1000ms
$(this).find(".controls").delay(1000).fadeOut();
});
});
It is possible to control the fade-out timer using CSS with:
-(prefix)-transition: all <duration> ease-out <delay>;
Take a look at this fiddle.

Categories

Resources