After successfully programming my jQuery slime menu, I am facing a minor issue. Although the menu works beautifully, I have noticed that when I move the arrow and the ending circle of the slime separately, they do not always connect accurately if the cursor moves too far from the starting point. This discrepancy seems to be related to a rounding problem. Here is an illustration of what I mean:
To view the code in action, you can check out the fiddle link below: http://jsfiddle.net/41Lcj653/4/
UPDATE (Working): http://jsfiddle.net/41Lcj653/7/
If anyone has any insights or solutions to this issue, I would greatly appreciate it. The menu utilizes CSS transformations and JavaScript to update the CSS rules with each movement.
The JavaScript portion of the code looks like this:
$(function(){
$(window).mousemove(function(e){
moveslime(e);
});
});
function moveslime(e){
var rad = $('.arrow').height() / 2;
var ofs = $('.arrow').offset();
var mPos = {x: e.pageX-25-rad, y: e.pageY-25-rad};
var dir = Math.round( -(Math.atan2(mPos.x, mPos.y)) / (Math.PI/180) );
$('.arrow').css('transform','rotate('+dir+'deg)');
$('.arrow').css('border-width','0 25px '+pdist(0, 0, mPos.x, mPos.y)+'px 25px');
$('.bubble').css('left', mPos.x+'px').css('top', mPos.y+'px');
}
function pdist(x1,y1,x2,y2) {
return Math.sqrt(Math.pow(x1-x2,2)+Math.pow(y1-y2,2));
}