tutorials.de Buch-Aktion 05/2012
Like Tree1Danke
  • 1 Beitrag von CPoly
ERLEDIGT
NEIN
ANTWORTEN
3
ZUGRIFFE
160
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 22.07.10 15:23 #1
    styler2go styler2go ist offline Mitglied Gold
    Registriert seit
    Mar 2008
    Ort
    Gründau
    Beiträge
    149
    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-Code:
    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-Code:
    function TryLinkOut()
    {
    if (    lUs = 1)
    {
    FadeLinkUsOut();
    }
    } 
    Geändert von styler2go (22.07.10 um 15:27 Uhr) Grund: Erweitert
     
    Zitieren Zitieren
  2. 22.07.10 15:27 #2
    CPoly CPoly ist gerade online Mitglied Weizenbier
    tutorials.de Premium-User
    Registriert seit
    Sep 2009
    Beiträge
    2.445
    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

    Code javascript:
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

    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;
}
    Geändert von CPoly (22.07.10 um 15:29 Uhr)
    styler2go bedankt sich. 
    Zitieren Zitieren
  3. 23.07.10 10:07 #3
    Quaese Quaese ist offline Moderator
    tutorials.de Moderator
    Registriert seit
    Feb 2004
    Beiträge
    3.451
    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 :
    1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

    <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
     
    Vielleicht muss man manchmal vom Weg abkommen, um nicht auf der Strecke zu bleiben!
    ----
    Der "Fortsetzungsroman" auf www.leuteforum.de

    New kind to realize large scalable projects with jQuery: jQuery SDK
    Zitieren Zitieren
  4. 23.07.10 18:40 #4
    styler2go styler2go ist offline Mitglied Gold
    Registriert seit
    Mar 2008
    Ort
    Gründau
    Beiträge
    149
    Ich habe es mit dem 1. Tipp hinbekommen. Ich danke vielmals
    Hier nochmal mein Code für die Nachwelt:
    PHP-Code:
    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;
    } 
     
    Zitieren Zitieren
« jQuery ausgewaehlte checkbox anzeigen | Mehrdimensionales Array erstellen »

Ähnliche Themen

  1. Maus zittern lassen
    Von programer85 im Forum Swing, Java2D/3D, SWT, JFace
    Antworten: 4
    Letzter Beitrag: 03.06.08, 14:42
  2. Zittern
    Von Reinforcement im Forum 3D Studio Max
    Antworten: 3
    Letzter Beitrag: 04.10.05, 15:07
  3. IFrame + Mozilla + seltsames Zittern
    Von Fanatico im Forum HTML & XHTML
    Antworten: 0
    Letzter Beitrag: 28.06.05, 21:21
  4. [mx] zittern
    Von möp im Forum Flash Plattform
    Antworten: 3
    Letzter Beitrag: 27.03.03, 16:39
  5. [Premiere] Beben|Wackeln|Zittern
    Von tC.pa im Forum Videoschnitt, Videotechnik & -produktion
    Antworten: 13
    Letzter Beitrag: 29.09.02, 20:06