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.
Related
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>
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
JSfiddle
Here is a fiddle for what I am trying to do. I am trying to use pure css with exception of jquery to toggle the appropriate class and let the css transitions handle the rest. I know this isn't supported by old IE's which is fine with me at this point.
What is happening is for when ever I click the link text the on/off the slider moves and eases just fine. However, when I hit the actual slider portion of the button it moves over suddenly with no easing. Here is the code:
HTML
<a href="#" class="on-off">
<span class="on">ON</span>
<span class="off">OFF</span>
<span class="slider right ease"></span>
</a>
CSS
.on-off {
display: inline-block;
position: relative;
padding: 5px;
background: #ff8600;
border-radius: 5px;
border: 1px solid #b8baba;
}
.on-off .on {
margin-right: 10px;
}
.slider {
position: absolute;
width: 50%;
height: 100%;
background: #fff;
z-index: 2;
border-radius: 5px;
border: 1px solid #b8baba;
}
.right {
top: 0;
right: 0;
}
.left {
top: 0;
right: 50%;
}
.ease {
-webkit-transition: all .5s ease;
-moz-transition: all .5s ease;
-ms-transition: all .5s ease;
-o-transition: all .5s ease;
transition: all .5s ease;
}
Javascript
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').removeClass('right');
$('.slider').addClass('left');
} else {
$('.slider').removeClass('left');
$('.slider').addClass('right');
}
})
This does work in chrome/firefox just fine. Just not IE10/11. I am trying to use graceful degradation. Keep things lightweight so if css can handle it not to use javascript where also it has basic functionality it just might toggle rather than ease in unsupported browsers. I know IE10/11 supports ease as it is working. just not when I click that particular area of the button.
Thanks for the help.
Hey this is going to sound dumb, but here's the solution
$('.on-off').on('click', function() {
$slider = $('.slider');
if ($slider.hasClass('right')) {
$('.slider').addClass('left');
$('.slider').removeClass('right');
} else {
$('.slider').addClass('right');
$('.slider').removeClass('left');
}
});
Add before you remove, and add a semicolon to your function.
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/
I am looking to get a nice smooth rollover image to fadeIn over the parent image for a set of buttons.
I have my overlay image stacked ontop of my main image, and it's set to "display: none;".
I have the following jQuery, and it works to FadeIn the overlay image, but it fades it in and out repeatedly when the mouse is over the image. Do I have something wrong in the syntax for my jQuery? Thanks in advance.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".main").mouseenter(function() {
jQuery(".overlay").fadeIn();
});
jQuery(".main").mouseleave(function() {
jQuery(".overlay").fadeOut();
});
});
</script>
and my HTML code:
<style type="text/css">
<!--
.hoverbox { position: relative; }
.main { width: 243px; height: 117px; }
.overlay { position: absolute; width: 243px; height: 117px; top: 0; left: 0; display: none; }
-->
</style>
<!-- button 1 -->
<div class="hoverbox" style="float: left; width: 243px; height: 117px;">
<a href="/locations/sacramento-international-airport/">
<img class="main" src="/images/home-button-smf_orig.jpg" />
<img class="overlay" src="/images/home-button-smf_rollover.jpg" />
</a>
</div>
<!-- end button 1 -->
Try this instead:
<script>
$(document).ready(function() {
$(".hoverbox").on("mouseenter", function(){
$(".overlay").stop(true, true).fadeIn();
});
$(".hoverbox").on("mouseleave", function(){
$(".overlay").stop(true, true).fadeOut();
});
});
</script>
I think hovering over the image itself was a bad idea, here I use the parent container. Also, using the on() method is now the preferred way to trigger mouse enter and leave events.
Good luck!
Michael's answer is a good one and will work, but it may be preferable to use CSS transitions for the animation and reserve jQuery for the behavior.
Here's a demo.
JavaScript
$(".hoverbox")
.mouseenter(function () {
$(this).addClass("on");
})
.mouseleave(function () {
$(this).removeClass("on");
});
CSS
.overlay {
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: .4s;
-moz-transition: .4s;
-o-transition: .4s;
-transition: .4s;
}
.hoverbox.on .overlay {
opacity: 1;
}
Here's a demo of the former approach (similar to Michael's answer). Also, your CSS has been cleaned up for both examples.
css is enough in this case, try the below code
.main:hover + .overlay{ display:block; }
and make sure overlay has a higher z-index
.overlay {
position: absolute; width: 243px; height: 117px;
top: 0; left: 0; display: none; z-index: 2;
}
http://jsfiddle.net/Grhqn/1/
for graceful fading
.overlay {
position: absolute; width: 243px; height: 117px; top: 0;
left: 0; z-index: 2; transition: opacity 1.5s ease; opacity:0;
}
.overlay:hover { opacity:1; }
http://jsfiddle.net/Grhqn/3/