Antworten auf deine Fragen:
Neues Thema erstellen

div+jquery / div überlappen und fadeOut klappt nicht richtig

perra

Gesperrt

Hallo ich bin schon seid Stunden an meiner Arbeit und komme nicht weiter dachte ich komme alleine drauf.
Jetz brauch ich hilfe.
Ganz unten seht ihr mein quelltext alles zusammen wie es jetzt ist und nicht mehr funktioniert.

ich versuche aus fun einen animierten ladebalken zu erstellen siehe bild 1
Das funktioniert alles perfekt.

Seht ihr denn den Button links "Enter" ?
Wenn man dort drauf drückt slidet das ganze nach oben und verschwindet. (Wenn man dann auf einblenden klickt erscheint es wieder, ist aber nur neben Sache)
Der code dafür sieht so aus:

Den Enter button möchte ich jetzt verdecken mit einem anderen Button, der Soll nirgentwo hin führen einfach um "loading" reinzuschreiben.
Sieht dann so aus:


so wenn man nun auf "loading klickt passiert nichts"
Ich habe nach einen timer gesucht dass den "loading" button verschwinden lassen soll.
Ich weiß nicht ob das so richtig ist aber es funktioniert.
nach 10sekunden verschindet der Button.(aber nur wenn das alleine steht ohne die andere functionen die noch folgen werden.)
--------------------------------------------------------
HTML:
<script type="text/javascript" src="../styles/jquery_1_3_2.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">

  $(document).ready(function(){
 $("#loading").hide(function() {
    $.fn.wait = function(time, type) {
        time = time || 10000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };
    function runIt() {
      $("div").wait(1000)
              .fadeOut(1000)
    }
    runIt();

  });
-------------------------------------------------------------
nur verschwindet jetzt nicht das "loading button" sondern der ganze ladebalken + button" ich wollte aber nur das "loading" verschwindet damit ich dann an´s "enter" button ran komme und somit auch den "ladebalken" ausblenden kann.
ich habe versucht bei $(document).ready(function() {
anstatt document "$(loading).ready(function()" einzugeben oder dadrunter aber funktioniert nicht.
Gibt es noch eine andere möglichkeit, oder kann mir jemand bei meinem Problem helfen.


--------------------------------------------------------------
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>

<link rel="stylesheet" type="text/css" href="../styles/styles.css">

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery - Animationen</title>
<script type="text/javascript" src="../styles/jquery_1_3_2.js"></script>
<script type="text/javascript">

</script>
<script type="text/javascript">

  $(document).ready(function(){
    $.fn.wait = function(time, type) {
        time = time || 10000;
        type = type || "fx";
        return this.queue(type, function() {
            var self = this;
            setTimeout(function() {
                $(self).dequeue();
            }, time);
        });
    };
    function runIt() {
      $("div").wait(1000)
              .fadeOut(1000)
    }
    runIt();

  });



$(document).ready(function() {
  $("#verstecke").click(function() {
    $("#box1").slideUp("slow", function() {
    });
  });
  $("#zeige").click(function() {
    $("#box1").slideDown("slow");
  
  });
});

</script>
</head>

<body>



<input id="zeige" type="button" value="einblenden">
<div id="box1" style="position: absolute; left: 10px; top: 60px;">
<input name="Zurücksetzen" type="reset" id="verstecke" "style="position: absolute; left: 1px; top: 2px; width: 109px; height: 59px; ;" value="ENTER"/>
<input name="dekoration" type="reset" id="loading" "style="position: absolute; left: 1px; top: 2px; width: 109px; height: 59px; ;" value="loading"/>
</div>


</body>

</html>
 
Zuletzt bearbeitet:

AW: div+jquery / div überlappen und fadeOut klappt nicht richtig

Warum machst du nicht einfach aus dem Enter und laden einen einzigen Button und änderst mithilfe von Javascript/jQuery das Attribut value von "laden" in "Enter", wenn fertig geladen wurde?

Und kannst ja dann einfach überprüfen, wenn value=laden soll der Button nichts machen und wenn value=enter dann soll er eben was ausführen.

gruß
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Neueste Themen & Antworten

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Statistik des Forums

Themen
118.616
Beiträge
1.538.358
Mitglieder
67.536
Neuestes Mitglied
QuestionMark
Oben