I'd like to get the current value of my transform: rotate, just before the mouse leaves. In the current state, the event seems to be caught when the mouse has already left my button and returns 0deg which is true at this moment.
My point is to play the same animation in reverse mode. For that, I need to get the current value of the rotation and make a transition from Xdeg to 0deg. I firstly tried to accomplish it in full CSS but the animation is suddenly broken when mouse leaves. I also tried to play another animation when the mouse is not on the button but the result is not as clean as I expected since it begins from a predefined value and not the current rotate value.
You can find my fiddle here : https://jsfiddle.net/yn460w6j/
Thanks to #lakenen for the degree function, btw !
I little play with that, use only js to solve this. I'm adding class to spinner when mouseover on button. Next, when mouseleave I am setting listener on stop animation iteration. When it complete I just remove animation class from spinner.
var $spinner = $("#random_glyph");
var $button = $("#random_button");
$button.on("mouseover", function() {
$spinner.addClass('animation');
});
$button.on("mouseleave", function() {
$button.bind("webkitAnimationIteration, mozAnimationIteration, animationiteration", function(e){
$spinner.removeClass('animation');
$(this).unbind(e);
});
});
https://jsfiddle.net/9jLstovx/
Related
I've been working with some javascript code which is from codepen, I forked it for my own usage and added some code to auto rotate the outer circle.
What I am unable to do is modify the code to pause on the shown element when I hover over the centre element .circle--rotate
The code I am working with for myself is on https://codepen.io/CelticWebs/pen/oNMxdrK. To attempt to do what I wanted, auto animate as well as pass eon hover, I added the following code at line 111 in the javascript:
function movetheone() {
i.is(":animated") || (p.direction = "right", p.step = d, o())
}
let abc = setInterval(movetheone, 3000);
$('.circle--rotate').hover(() => {
clearInterval(abc);
}, () => {
movetheone
})
This spins the circle automatically, then does stop spinning when you hover over it but unfortunately it often moves forward one place before pausing, which make the hover pointless as it moves away from what you wanted to stop on. It also doesn't start back up when you move away.
Does anybody have any suggestions on making this work better please?
I've made the link to the code more obvious above for those asking for more of the code. Thanks.
I'm taking up Phaser, and practicing with the basic button.
For an example, look no further than the Phaser button example right here.
However, I noticed that if you hold down your mouse click on the Phaser button, move the mouse away from the button, and let go of your mouse click, the Phaser button still activates as if the mouse was right on top of it.
You can also try holding the mouse click on the Phaser button, and then moving your mouse out of the frame. The Phaser button will also activate.
I'm not sure if this is the default behaviour for buttons in Phaser, but it's not for other JS game libraries / engines like Cocos 2D JS.
So far, I've tried the following:
Setting the button to activate onInputDown - not really preferred.
Setting another function onInputUp - doesn't change the behaviour.
Here's my code:
this.playButton = this.game.add.button(this.game.world.centerX - 100, this.game.world.centerY + 230, 'ui', this.actionOnClick, this, 'ui_btn_play_U.png', 'ui_btn_play_U.png', 'ui_btn_play_D.png', 'ui_btn_play_U.png');
this.playButton.onInputUp.add(this.startGameplay, this);
actionOnClick() {
}
startGameplay() {
this.clickButton();
this.bgm.stop();
var slideOut = Phaser.Plugin.StateTransition.Out.SlideTop;
slideOut.duration = 1000;
var slideIn = Phaser.Plugin.StateTransition.In.SlideTop;
slideIn.duration = 1000;
this.game.state.start('gameplay' , slideOut );
}
What can I do to change this behaviour?
I faced this issue time ago and that's how I solved it:
You need to combine three events onInputDown, onInputUp and onInputOut. In pseudo-code it would be like the following:
myButton.clicked=false;
When myButton.onInputDown -> myButton.clicked=true
When myButton.onInputOut -> myButton.clicked= false
When myButton.onInputUp -> if (myButton.clicked) then do desired action
I'm pretty new at Raphael JS, and SVG in general. Currently I'm using SVG and Raphael on a map-functionality.
I'm having an issue with a hover effect which offsets the given element you hover with 10px. However, if you move your mouse slowly into the element the hoverIn and hoverOut will happen a bunch of times resulting in flickering.
I think I could resolve this by cloning the countries and leave it hidden and stationary, when hovering. I could do this I say, because the map contains hundreds of shapes...
What is the approach? What should I do?
If I understand correctly the element moves when you hover over it, which cause the hoverOut event. What do you want to happen with slow mouse movements? It moves once, stays moved until the mouse gets inside?
You need to set a variable on the element to show when it's been shifted 10px. Then you can do something like (pseudocode)
hoverIn() {
if (isShifted) {
inWhenShifted = true
} else {
// offset element
isShifted = true
}
hoverOut() {
if (isShifted) {
if (inWhenShifted) {
// put element back
isShifted = false
inWhenShifted = false
} else {
// do nothing?, this is the case where the hoverOut fired
// because we moved the element
}
} else {
// do nothing?, this is the case where we hoverOut again after shifting
// the element back
}
}
When a user places his mouse cursor over/near the outline of the Polygon, an anchor should appear and follow the position of the mouse, but snapping to the outline of the Polygon.
Problem: The anchor seems to flicker when the mousemove handler function updates the position of this anchor. What's causing the flickering and the slow update? The KineticJS example here appears to update pretty quickly.
Also, the anchor is not snapping to the outline/stroke of the Polygon. How can this effect be achieved?
JSfiddle
Your mousemove function is moving the anchor. Once the anchor is moved your mouse is no longer over the polyHitArea so your mouseleave event is firing and hiding the anchor.
Edit
The best way that I can think of off hand to prevent this from happening is to place the setVisible(false) code into a setTimeout call -- and have a mouseenter event on the mouseoverAnchor call clearTimeout.
var polyHitArea._timeout = 0;
polyHitArea.on('mouseover', function(e) {
clearTiemout(polyHitArea._timeout);
mouseoverAnchor.setVisible(true);
stage.draw();
});
polyHitArea.on('mouseleave', function(e) {
clearTimeout(polyHitArea._timeout);
polyHitArea._timeout = setTimeout(function(){
mouseoverAnchor.setVisible(false);
}, 25); // 25 ms enough time?
stage.draw();
});
mouseoverAnchor.on('mouseenter', function(e) {
clearTimeout(polyHitArea._timeout);
});
In a webapp I'm working on, I want to create some slider divs that will move up and down with mouseover & mouseout (respectively.) I currently have it implemented with JQuery's hover() function, by using animate() and reducing/increasing it's top css value as needed. This works fairly well, actually.
The problem is that it tends to get stuck. If you move the mouse over it (especially near the bottom), and quickly remove it, it will slide up & down continuously and won't stop until it's completed 3-5 cycles. To me, it seems that the issue might have to do with one animation starting before another is done (e.g. the two are trying to run, so they slide back and forth.)
Okay, now for the code. Here's the basic JQuery that I'm using:
$('.slider').hover(
/* mouseover */
function(){
$(this).animate({
top : '-=120'
}, 300);
},
/* mouseout*/
function(){
$(this).animate({
top : '+=120'
}, 300);
}
);
I've also recreated the behavior in a JSFiddle.
Any ideas on what's going on? :)
==EDIT== UPDATED JSFiddle
It isn't perfect, but adding .stop(true,true) will prevent most of what you are seeing.
http://jsfiddle.net/W5EsJ/18/
If you hover from bottom up quickly, it will still flicker because you are moving your mouse out of the div causing the mouseout event to fire, animating the div back down.
You can lessen the flicker by reducing the delay, however it will still be present until the delay is 0 (no animation)
Update
I thought about it and realized that there is an obvious solution to this. Hoverintent-like functionality!
http://jsfiddle.net/W5EsJ/20/
$(document).ready(function() {
var timer;
$('.slider').hover(
/* mouseover */
function(){
var self = this;
timer = setTimeout(function(){
$(self).stop(true,true).animate({
top : '-=120'
}, 300).addClass('visible');
},150)
},
/* mouseout*/
function(){
clearTimeout(timer);
$(this).filter(".visible").stop(true,true).animate({
top : '+=120'
}, 300).removeClass("visible");
}
);
});
You could use .stop() and also use the outer container position
$(document).ready(function() {
$('.slider').hover(
/* mouseover */
function(){
$(this).stop().animate({
top : $('.outer').position().top
}, 300);
},
/* mouseout*/
function(){
$(this).stop().animate({
top : $('.outer').position().top + 120
}, 300);
}
);
});
DEMO
Hope this helps
Couldn't reproduce your issue but I believe that hover is getting called multiple times. To work around this you can check if the div is already in animation. If yes, then don't run another animation again.
Add following piece of code to check if the div is already 'animating':
if ($(this).is(':animated')) {
return;
}
Code: http://jsfiddle.net/W5EsJ/2/
Reference:http://api.jquery.com/animated-selector/
I understand the problem and reproduced it, it happens when hovering from the bottom up. The hovering with the mouse is what's causing the problem since the animation function will be called when the mouse hovers over the image. You need to control what happens here by using mouse enter and mouse leave, check out a similar example: Jquery Animate on Hover
The reason it's like that is because the hover is getting queued up causing it to slide up and down multiple times. There's a plug-in called hoverIntent which fixes the issue. http://cherne.net/brian/resources/jquery.hoverIntent.html
If you do decide to use hoverIntent, the only thing you have to change in your code is .hover > .hoverIntent