Zittern beim faden.

S

styler2go

Erfahrenes Mitglied
Hallo!

Ich habe ein Problem mit einem selbst geschriebenen Javascript:

Ich habe ein Script geschrieben, das ein div von rechts reinlaufen lässt und auch wieder rauslaufen lässt. Allerdings, falls man bevor es ganz eingefadet ist, die maus von diesem div nimmt, fägnt es an wie blöd zu zittern ( vor un dzurück) wie kann ich da eien sperre einbauen dass er erst ausfadet wenn er ganz eingefadet ist? bzw. dass er das andere Faden abbricht sobald man mti der maus aus dem div rausgeht? das abbrechen und direkt wechseln wäre wohl die schönste aber schwrrste Lösung. Jmd eine Idee?

Hier noch mein JS-Code:

PHP: 
var lUs = -55;
function FadeLinkUsIn()
{
  var LinkUs = document.getElementById("linkus");
if (lUs < -1)
 {
   lUs += 1;
   LinkUs.style.right = lUs + "px";
 setTimeout("FadeLinkUsIn()", 10)
 }
}
function FadeLinkUsOut()
{
  var LinkUs = document.getElementById("linkus");
if (lUs > -55)
 {
   lUs -= 1;
   LinkUs.style.right = lUs + "px";
  setTimeout("FadeLinkUsOut()", 10)
}
}

durch eine kleine Erweiterung habe ich ein etwa sbesseres erreicht, aber immernoch nicht das beste, hier wie ich das jetzt geändert habe (bzw. den FadeOut starte)

PHP: 
function TryLinkOut()
{
if (lUs = 1)
{
FadeLinkUsOut();
}
}
 
Zuletzt bearbeitet:
Du musst lediglich deinen Code um eine Sperrvariable erweitern, damit sich beide Animationen nicht behindern.

Edit:
So wie ich es hier gemacht habe, würde es natürlich nicht funktionieren, sondern eine Animation würde sich selbst blocken...
Am besten eine Statusvariable welche die Werte 0, 1 und 2 annehmen kann.
0: keine Animation läuft
1: fadeIn läuft
2: fadeOut läuft

Javascript: 
var lUs = -55;
var blocked = false;

function FadeLinkUsIn()
{
    if(blocked)
        return;
    
    blocked = true;

    var LinkUs = document.getElementById("linkus");
    if (lUs < -1) {
        lUs += 1;
        LinkUs.style.right = lUs + "px";
         setTimeout("FadeLinkUsIn()", 10)
    }
    else blocked = false;
}

function FadeLinkUsOut()
{
    if(blocked)
        return;

    blocked = true;

    var LinkUs = document.getElementById("linkus");
    if (lUs > -55)
       {
       lUs -= 1;
       LinkUs.style.right = lUs + "px";
       setTimeout("FadeLinkUsOut()", 10)
    }
    else blocked = false;
}
 
Zuletzt bearbeitet:
Hi,

anderer Lösungsvorschlag:

Definiere ein globales Timerhandle. Über dieses kannst du zum einen erkennen, ob bereits eine Animation läuft (ungleich null), zum anderen kannst du eine laufende Animation beenden.

Beispiel:
Code: 
<html>
<head>
<title>www.tutorials.de</title>
<meta name="author" content="Quaese">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
  <!--
#linkus{
  position: absolute;
  right: -55px;
  z-index: 999;
  width: 200px;
  height: 100px;
  border: 1px solid #aaa;
  background: #fff;
  padding: 9px;
}
 //-->
</style>
<script type="text/javascript">
  <!--
var lUs = -55;
var hTimer = null;

function FadeLinkUsIn(){
  var LinkUs = document.getElementById("linkus");
  if(lUs < -1){
    lUs += 1;
    LinkUs.style.right = lUs + "px";
    hTimer = window.setTimeout("FadeLinkUsIn()", 10)
  }else
    hTimer = null;
}
function FadeLinkUsOut(){
  if(hTimer != null){
    window.clearTimeout(hTimer);
    hTimer = null;
  }
  var LinkUs = document.getElementById("linkus");
  if(lUs > -55){
    lUs -= 1;
    LinkUs.style.right = lUs + "px";
    hTimer = window.setTimeout("FadeLinkUsOut()", 10)
  }else
    hTimer = null;
}
 //-->
</script>
</head>
<body>
<div id="linkus" onmouseover="FadeLinkUsIn();" onmouseout="FadeLinkUsOut();">link us</div>
</body>
</html>
Ciao
Quaese
 
Ich habe es mit dem 1. Tipp hinbekommen. Ich danke vielmals :)
Hier nochmal mein Code für die Nachwelt:
PHP: 
var lUs = -55;
var blocked = 0;
 
function FadeLinkUsIn()
{
    if(blocked == 2) return;
    blocked = 1;
 
    var LinkUs = document.getElementById("linkus");
    if (lUs < -1) {
        lUs += 1;
        LinkUs.style.right = lUs + "px";
         setTimeout("FadeLinkUsIn()", 10)
    }
    else blocked = 0;
}
 
function FadeLinkUsOut()
{
    if(blocked == 1) return;
 
    blocked = 2;
 
    var LinkUs = document.getElementById("linkus");
    if (lUs > -55)
       {
       lUs -= 1;
       LinkUs.style.right = lUs + "px";
       setTimeout("FadeLinkUsOut()", 10)
    }
    else blocked = 0;
}
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück