We Keep Coding

JS mouseenter -> acceleration value increases; mouseleave -> deceleration value decreases

I'm trying to achieve a mouseover effect.
When the usere hovers the element, it start spinning slowly and over time the speed will increase. When the user leaves the element, the spinning will decrease and eventually stop.
My approach would be to set a loop, that multiplies the given value 1.
That works.
Now when the user leaves, I somehow have to get the value and divide it by some number. Thats not working :-(
Here my code, I use jQuery
https://codepen.io/hhqh/pen/gOOVQPV?editors=1011
var deg = 1;
var img;
var keepGoing = true;
var keepStopping = true;
function myLoop(img) {
console.log(img);
deg *= 1.1;
console.log(deg);
img.css('transform', 'rotate(' + deg + 'deg)');
if(keepGoing) {
setTimeout(myLoop, 30, img);
}
}
function myStop(img) {
console.log(img);
deg /= 1.1;
console.log(deg);
img.css('transform', 'rotate(' + deg + 'deg)');
if(keepStopping) {
setTimeout(myStop, 30, img);
}
}
$('#spinner').on('mouseenter', function(){
var img = $(this).find('img');
startLoop(img);
}).on('mouseleave', function(){
var img = $(this).find('img');
stopLoop(img);
});
function startLoop(img) {
keepGoing = true;
keepStopping = false;
myLoop(img);
}
function stopLoop(img) {
keepGoing = false;
keepStopping = true;
myStop(img);
}
As you see, it just jumps back. I want to slowly decrease the value, but because it rotates and just adds up the number, decreasing actually rotates it backwards.
Maybe I have to get the current rotation, and make a new calculus that is some how adding a decreasing number. No idea how..

You have to stop myStop function in a specific condition, when rotation degrees is at starting position.
function myStop(img) {
console.log(img);
deg /= 1.1;
console.log(deg);
if (deg.toFixed(1) < 0.1) {
return;
}
img.css('transform', 'rotate(' + deg + 'deg)');
if(keepStopping) {
setTimeout(myStop, 30, img);
}
}

How to remove the delay in jQuery .hover() method

I tried to make my nav element change color as the document scrolls, I also want to make the hover state change color dynamically. But there's a delay, I have to wait for a fraction of seconds before I can hover and change the color. Can I remove the delay? Or better, when I am hovering on a menu, can I make the hovered color change by scrolling? I feel like I'm so close to the solution yet I can't find it.
Here are the jQuery codes:
$(document).ready(function () {
$(document).scroll(function () {
var h = $(window).scrollTop() / $(document).height() * 360;
if (h <= 180) {
hhover = h + 180;
} else {
hhover = h - 180;
}
$("a").css({
"color":"hsl(" + h + ",100%,50%)","transition":"0.2s ease"});
$("a").hover(
function () {
$(this).css(
"color", "hsl(" + hhover + ",100%,50%)");
},
function () {
$(this).css(
"color", "hsl(" + h + ",100%,50%)");
});
});
});
Please find my jsFiddle below:
https://jsfiddle.net/dtZDZ/1036/
Thank you!

In your CSS code:
.nav-links a:hover {
color: hsl(180,100%,50%);
transition: ease;
}

Delete all CSS transition definitions from javascript code and from styles.

jQuery spin function - specify 20% spin upon image click?

I'm a jQuery newbie - but have managed to modify a roulette wheel script to spin a "pie" image for a homepage I'm working on.
It works great - but the client also want to add an arrow on either side that will advance the pie one section upon click - so clockwise for one arrow, counter-clockwise for another.
Is there a way to specify a partial spin?
Any guidance is much appreciated! I'm trying to meet a ridiculous deadline and am struggling with this.
Here's the page:
http://bluetabby.com/rr/index13.html
Here's the jQuery code so far - the functions I need to figure out are leftArrow and rightArrow:
$( document ).ready(function() {
window.WHEELOFFORTUNE = {
cache: {},
init: function () {
console.log('controller init...');
var _this = this;
this.cache.wheel = $('.wheel');
this.cache.wheelSpinBtn = $('.wheel');
this.cache.leftArrow = $('.leftarrow');
this.cache.rightArrow = $('.rightarrow');
//mapping is backwards as wheel spins clockwise //1=win
this.cache.wheelMapping = ['Mitzvahs','Galas','Florals','Props','Weddings'].reverse();
this.cache.wheelSpinBtn.on('load', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
this.cache.rightArrow.on('click', function (e) {
e.preventDefault();
if (!$(this).hasClass('disabled')) _this.spin();
});
},
spin: function () {
console.log('spinning wheel');
var _this = this;
//disable spin button while in progress
this.cache.wheelSpinBtn.addClass('disabled');
/*
Wheel has 10 sections.
Each section is 360/10 = 36deg.
*/
var deg = 1000 + Math.round(Math.random() * 1000),
duration = 6000; //optimal 6 secs
_this.cache.wheelPos = deg;
//transition queuing
//ff bug with easeOutBack
this.cache.wheel.transition({
rotate: '0deg'
}, 0).delay(1000)
.transition({
rotate: deg + 'deg'
}, duration, 'easeOutCubic');
//move marker
_this.cache.wheelMarker.transition({
rotate: '-20deg'
}, 0, 'snap');
//just before wheel finish
setTimeout(function () {
//reset marker
_this.cache.wheelMarker.transition({
rotate: '0deg'
}, 300, 'easeOutQuad');
}, duration - 500);
//wheel finish
setTimeout(function () {
// did it win??!?!?!
var spin = _this.cache.wheelPos,
degrees = spin % 360,
percent = (degrees / 360) * 100,
segment = Math.ceil((percent / 5)), //divided by number of segments
win = _this.cache.wheelMapping[segment - 1]; //zero based array
console.log('spin = ' + spin);
console.log('degrees = ' + degrees);
console.log('percent = ' + percent);
console.log('segment = ' + segment);
console.log('win = ' + win);
//re-enable wheel spin
_this.cache.wheelSpinBtn.removeClass('disabled');
}, duration);
},
resetSpin: function () {
this.cache.wheel.transition({
rotate: '0deg'
}, 0);
this.cache.wheelPos = 0;
}
}
window.WHEELOFFORTUNE.init();
});//]]>
Thanks for any pointers!

I looked through your code and figured out you are using transit.js to do the spinning animations. Essentially, the object's css (transform "rotate") is being updated over a certain amount of time (like jQuery's animate).
You can extend your wheel of fortune object with spinright and spinleft functions (or whatever name you prefer), which you can bind to the keys/buttons that you'll create. Your code would look something like this:
WHEELOFFORTUNE.spinright = function() {
// get current degree of wheel and convert to integer
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree + 73) + "deg" },1000 );
}
WHEELOFFORTUNE.spinleft = function() {
var degree = parseInt( this.cache.wheel.css('rotate'), 10 );
this.cache.wheel.transition( { "rotate": (degree - 73) + "deg" },1000 );
}
Then you can bind these functions to buttons or call the functions directly in console:
WHEELOFFORTUNE.spinright()
WHEELOFFORTUNE.spinleft()
Note: 73deg looks to be about the amount that 1 section is, but you'll probably have to play around with the numbers. You may also want to cache the degrees in your object as well. You probably will also need to figure out a way to center on each section per button press.
Cheers!

3D div transformation resetting

I successfully created a div that the user can "rotate". It works perfectly, except that rotating on the X direction cancels/resets the existing rotation in Y direction and vise versa. Also the div is a draggable object from jQuery. How can I fix this so that transformations are not reset?
<script>
var degreesY = 0;
function rotateLeft() {
var degreesuseY = degreesY + 10;
document.getElementById("Notes").style["transform"]= "rotateY(" + degreesuseY + "deg)";
}
var degreesX = 0;
function rotateUp() {
var degreesuseX = degreesX + 10;
document.getElementById("Notes").style["transform"]= "rotateX(" + degreesuseX + "deg)";
}
</script>
<div id="draggable">
<div class="LeftRotate" onclick="rotateLeft();degreesY=degreesY+10"></div>
<div class="UpRotate" onclick="rotateUp();degreesX=degreesX+10"></div>
</div>

The problem is that when you set the transform property, you're rewriting the current value and erasing what you have so far. Try changing your code to work instead with a single rotate() function and set the transform property as follows:
var degreesX = 0;
var degreesY = 0;
function rotate(xAxis) { //Make xAxis a boolean
if (xAxis) {
degreesX+=10;
} else {
degreesY+=10;
}
document.getElementById("Notes").style["transform"] = "rotate(" + degreesX + "deg " + degreesY + "deg)";
}
I put a simple example (using jQuery) in this jsFiddle.
You could avoid using xAxis, if you want, by having the function determine whether the element clicked has class UpRotate or LeftRotate.

Halting a translate3d transition

I have a scrolling text div that I would like the user to be able to pause and resume with the click of a button. Here's how I'm creating the transition:
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length-4))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
I've tried to set the transform to "none" in the pause function, but that just makes the div scroll back to where it previously was. It's the equivalent of doing translate3d(0px, 0px, 0px). Is there a method to simply pause the current animation, or would I have to somehow measure the current transition position?
Update: Here's a jsfiddle: http://jsfiddle.net/VAgXF/1/

Edit based on live example
Try this demo instead
You can use WebKitCSSMatrix in your case to get the translate3d values. I don't know all the selectors for it, but e is x and f is y, so this bit of code works since you don't change the z
var words = document.getElementById("words");
var speed = 10;
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
var paused = false;
document.getElementById("button").onclick = function() {
if(!paused) {
var translated3D = new WebKitCSSMatrix(window.getComputedStyle(words, null).webkitTransform);
words.style.webkitTransform = "translate3d(" + translated3D.e + "px, " + translated3D.f + "px, " + 0 + "px)";
paused = true;
button.innerHTML = "Start";
} else {
paused = false;
button.innerHTML = "Stop";
words.style.webkitTransform = "translate3d(0px, -"+(27 * (words.children.length))+"px, 0px)";
words.style.webkitTransition = ((27 * words.children.length)/speed)+"s all linear";
}
}
That being said I would avoid transform3d for some this simple, it over complicates the issue.