clearTimer() funktioniert nich

[MrTroble]

Hallo zusammen dis mal hab ich ein js
Problem , ich bin neu bei den Scripts
und habe volgendes Problem:

ich möchte mit den folgenden zeilen
eine listener zu einem bild bzw objekt hinzu fügen
so das dies wenn mann auf das bild geht die opacity
jede 20milsek um -0.02 gemacht wird so wenn mann jetzt
aber von dem Bild wieder Runter geht soll das gegen teil passieren
also + 0.02 dazu Folgender code:

var num = 1;
var tim;
var tims;
function sleepFor( sleepDuration ){
    var now = new Date().getTime();
    while(new Date().getTime() < now + sleepDuration){ /* do nothing */ }
}
function rescale(event){
    event.target.style.opacity = num.toString();
    num = num - 0.02;
    if(event.target.style.opacity == 0.06){
     
    }
}
function mscale(event){
    event.target.style.opacity = num.toString();
    num = num + 0.02;
    if(event.target.style.opacity == 1){
     
    }
}
function setTimeScaler(event){
    tim = setInterval(function () {rescale(event);}, 20);
}
function setTimerMscaler(event){
    tims = setInterval(function () {mscale(event);}, 20);
}
function addListener(element){
    document.getElementById(element).addEventListener("mouseenter", function( event ) {setTimeScaler(event); clearInterval(tims);},false);
    document.getElementById(element).addEventListener("mouseout", function( event ) {setTimeMscaler(event);clearInterval(tims);},false);
}