jQuery mousemove stop

1.2k Views Asked by At

English translation by Felix:

I want to create a menu which follows the mouse cursor and stops moving if the cursor is in a certain distance to it. My solution so far: I created two nested divs. In inner div contains the menu. The outer div is for stopping the menu. If the cursor moves over the outer div, the inner div should stop and stay as long as cursor hovers over it. *EDIT: And the menu should stop softly but quickly.

Original German:

ich möchte ein Menü erstellen welches meinen Mauszeiger verfolgt und in bestimmter nähe stehen bleibt. Mein Lösungsansatz ist folgender: Ich baue 2 ineinander verschachtelte DIVs. Im inneren DIV ist das Menü vorhanden. Das äußere Div ist zum stoppen da. Also wenn ich mit dem Mauszeiger in das äußere Div gehe soll das innere DIV stark abbremsen und stehen bleiben, solange ich drin bin.

Hier mein derzeitiger Code (fw's: jQuery):

var div = jQuery("<div id='menubox'><div id='innerdiv'>&nbsp;</div></div>").appendTo("body");

    var mouseX = 300, mouseY = 300;
    jQuery(document).mousemove(function (el) {
        if (onMenu == false) {
            mouseX = el.pageX;
            mouseY = el.pageY;
        }
    });

    jQuery('#menubox').mouseenter(function (el) {
        onMenu = true;
        stopMoving();
    }).mouseleave(function (el) {
        onMenu = false;
        startMoving();
    });

    var xp = 0, yp = 0;
    function stopMoving() {
        clearTimeout(timer);
        timer = setTimeout(function () {
            clearInterval(loop);
        }, 100);
    }
    function startMoving() {
        clearTimeout(timer);
        clearInterval(loop);
        loop = setInterval(function () {
            xp += (mouseX - xp) / 20;
            yp += (mouseY - yp) / 20;
            jQuery('#menubox').css({ left: xp, top: yp });
        }, 40);
    }
    startMoving(); // StartMoving on Page Load

*EDIT: I had an IE Bug. I had to place a transparent gif at outer div. Now this function is ok. If im in the outer or inner div, the div dont move, but it dont stop quickly. It should stop very soft and quick and dont move i.e. 200px and than stops or stops hard with clearIntervall(). Should i make one more timer?

0

There are 0 best solutions below