I want to change the opacity of a div (like 0.5) when the mouse is moving
and when the mouse doesn't move change the opacity to 1
is that possible ?
Thank's.
Yves
If you want to apply this to the element whenever the mouse is on the window, try this.
HTML
<div id="myDiv" style='width:100px;height:100px;background:rgb(255,0,0);'></div>
JS:
$(window).on("mousemove",function(e){
$("#myDiv").css({opacity:0.5});
clearTimeout(window.myTimeout);
window.myTimeout=setTimeout(function(){
$("#myDiv").css({opacity:1});
},100);
});
Basically, every time you move the mouse, you create a timeout but in the next movement, you cancel it. When you stop moving the mouse, eventually the timeout will execute and change the opacity of the element.
Related
In this fiddle I have a small div with an opacity animation.
The animation plays correctly when the state changes to true and the component is mounted
and the div fades in.
However the animation does not play when the component is unmounted when the state goes to false.
I have the animation set as both, and I tried also applying a reverse animation (from 1 to 0) but it just ends up playing right after the first one and I end up with no square.
How can I make this fade animation play in reverse when the component disappears?
Edit:
I did not mention this is done in React.
My solution eventually was to just use a library for animation, which made this efortless.
I'm leaving the question up though in case others have vanilla solutions to the problem.
I've found sort of a hacky way to solve this. You might find something better later on, but for now, this works.
I've created a class .hide which sets opacity to 0 and visibility to hidden, which will be added to the box. The initial insertion animation is the same. But for exiting, I've applied a transition property to the box. When you click a second time, I've wrapped the setVisible() method in a setTimeout(), that has a delay timing the same as the transition duration for .hide.
This will allow the box to fade out first, and then the setVisible() method will be called.
If you don't want to use a setTimeout(), you can add an eventListener to the box for transitionend, and then call setVisible() once that is done.
Here's a fiddle: https://jsfiddle.net/32y8vjus/1/
PS: In the fiddle, I'm changing the background color to show that the transition happens before the box is removed. You can change that to opacity.
I have a simple div with an onclick function (Note I removed the content of the svg for readability):
<div id="sidebar-toggler">
<svg></svg>
</div>
body.on('click', '#sidebar-toggler', function() {
$('#sidebar').toggleClass('collapsed');
});
this is working without a problem. But the div has also a transition to move a little to the right on hover:
&:hover
left: 30px
transition: left 0.4s ease-out
Now, sometimes (quite often) during the transition, the click event is not fired. Is this a common Problem and is there a solution to this?
What I have tried is to make a wrapper div around it, which is as big as the animations goes. But the Problem still exist.
What I have done is to add a wrapper around my round div like this:
( ) = Round div (button)
_________
| | = wrapper
_________
transition
From:
_________
|( ) |
_________
To:
_________
| ( )|
_________
And of course, I remapped the onclick to the wrapper. I though because the onclick is on the wrapper, and there is no transition on the wrapper, the onclick should be fired. But as said, no success so far.
This is because click is very sensitive: you must click your mouse both down and up without the element moving.
You could use a mousedown or mouseup instead:
body.on('mouseup', '#sidebar-toggler', function() {
$('#sidebar').toggleClass('collapsed');
});
That wouldn't be dependent on movement.
The same would happen if you have a onClick method on a non-moving element, but you move your mouse. It wouldn't work since it's a drag instead of a click.
So, I'm trying to make a gun aim at the crosshair, so it follows the mouse all the time. I want it to go up on recoil, so the mouse crosshair goes up and the gun follows up.
I tried something like mouseY - 10; but with no luck, it didn't do anything.
You cannot set the position of the mouse.
Instead, set the Position of the cross hair.
I've got a simple fiddle running a Tween animation using MooTools Fx.Tween and I can't seem to get the onComplete option to fire after the initial animation stops. For whatever reason, it always wants to fire in the middle. What am I doing wrong?
Fiddle
It seems you're doing it right.
I think there's a problem (basically, a 'conflict'.. you can use css transition OR js animation, not together) with -webkit-transition: all 1s linear 0 inside #bar . By commenting/removing it, it's working properly -> http://jsfiddle.net/vPuAR/
I have a bit of a problem. I want to create something like this but vertical instead of horizontal.
I also want to control the slider by clicking on up/down buttons instead of scrolling.
Reference: http://active.tutsplus.com/tutorials/effects/create-a-responsive-xml-image-scroller-in-actionscript-3-0/
Now i have a container mc that holds all my thumbs and a mask that masks that container. I also have my buttons that gonna
trigger this scroll up/scroll down function.
I have sort of no idea at all of how to write the function for that. I have made the container tween up and down but i need a limit
for that so it want tween to far and go out of bounds.
Any suggestions?
First, to prevent the mask from moving with the content, make sure it's sitting on the same level as your content.
For example:
myContainer ¬
- contentBox
- maskShape
And contentBox.mask = maskShape.
For the scrolling, it's just a matter of increasing or decreasing the position of your contentBox with every click of your navigation buttons.
In the case of the down button, on your event listener you'd do something like...
contentBox.y = contentBox.y + 25;
Of course we want this to smoothly slide over, so in the case of TweenLite...
TweenLite.to(contentBox, 0.5, {y:contentBox.y + 25});
The "up" button is simply the reverse of this.