[SOLUCIONADO] Ejecutar solo una vez un hide

[killpe]

Hola.

tengo este código:

Código:

var oldMath = 0;
$(document).mousemove(function(event) {
    var startingTop = 10,
        startingLeft = 22,
        math = Math.round(Math.sqrt(Math.pow(startingTop - event.clientY, 2) +Math.pow(startingLeft - event.clientX, 2))) + 'px';
    $('#currentPos').text('you are at :' + math);
    
    if(Math.abs(parseInt(math) - oldMath) > 50){
        //you have moved 5 pixles, put your stuff in here
        //$('#logPos').append('5');
        
        $("#logPos").show(1500);
        $("#logPos").delay(1200).hide(1500);
        
        oldMath = parseInt(math);
    }
   
});

que lo que hace es que al mover el ratón X cm muestre una capa, al pasar unos segundos desaparece sola.

¿Problema? que una vez sale la primera vez, esta apareciendo y desapareciendo sin parar cada x segundos y me gustaría que una vez desaparezca tengas que volver a mover el ratón para que vuelva a aparecer.

lo podeis ver funcionando aqui http://jsfiddle.net/Em4Xu/378/

Muchas gracias por vuestra ayuda

[killpe]

AL final lo he hecho con css y jQuery

esta es la parte de css

Código HTML:

@-webkit-keyframes bounceIn{0%{opacity:0;-webkit-transform:scale(.3)}50%{opacity:1;-webkit-transform:scale(1.05)}70%{-webkit-transform:scale(.9)}100%{-webkit-transform:scale(1)}}
@-moz-keyframes bounceIn{0%{opacity:0;-moz-transform:scale(.3)}50%{opacity:1;-moz-transform:scale(1.05)}70%{-moz-transform:scale(.9)}100%{-moz-transform:scale(1)}}
@-o-keyframes bounceIn{0%{opacity:0;-o-transform:scale(.3)}50%{opacity:1;-o-transform:scale(1.05)}70%{-o-transform:scale(.9)}100%{-o-transform:scale(1)}}
@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.05)}70%{transform:scale(.9)}100%{transform:scale(1)}}
.bounceIn { -webkit-animation-name:bounceIn;-moz-animation-name:bounceIn;-o-animation-name:bounceIn;animation-name:bounceIn; opacity:1; }

@-webkit-keyframes bounceOut{0%{-webkit-transform:scale(1)}25%{-webkit-transform:scale(.95)}50%{opacity:1;-webkit-transform:scale(1.1)}100%{opacity:0;-webkit-transform:scale(.3)}}
@-moz-keyframes bounceOut{0%{-moz-transform:scale(1)}25%{-moz-transform:scale(.95)}50%{opacity:1;-moz-transform:scale(1.1)}100%{opacity:0;-moz-transform:scale(.3)}}
@-o-keyframes bounceOut{0%{-o-transform:scale(1)}25%{-o-transform:scale(.95)}50%{opacity:1;-o-transform:scale(1.1)}100%{opacity:0;-o-transform:scale(.3)}}
@keyframes bounceOut{0%{transform:scale(1)}25%{transform:scale(.95)}50%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(.3)}}
.bounceOut {-webkit-animation-name:bounceOut;-moz-animation-name:bounceOut;-o-animation-name:bounceOut;animation-name:bounceOut; opacity:0;}

y esta la de jQuery

Código:

$("#Pagina").mouseenter(function(){ $("#Menuopciones").removeClass('oculto').removeClass('bounceOut').addClass('bounceIn'); });
$("#Pagina").mouseleave(function(){ $("#Menuopciones").removeClass('bounceIn').addClass('bounceOut');  });