tutorials.de Buch-Aktion 05/2012
ERLEDIGT
NEIN
ANTWORTEN
0
ZUGRIFFE
164
EMPFEHLEN
  • An Twitter übertragen
  • An Facebook übertragen
AUF DIESES THEMA
ANTWORTEN
  1. 06.10.11 19:02 #1
    Avatar von weedo
    weedo weedo ist offline Mitglied Gold
    Registriert seit
    Dec 2003
    Beiträge
    179
    Guten Abend =)

    Ich versuche derzeit eine Website zu entwickeln, die mittels jQuery animationen haben soll, wie man sie aus Flashwebseiten kennt.

    Ich habe das Design, sowie die dateien mit hochgeladen, denn dann sieht man die korrekte Darstellung der images.

    Zur Fehlerbeschreibung. Die Animationen laufen soweit fehlerfrei, bis man zum Click-Event kommt.

    Beim click auf die unsichtbaren Schaltflächen, mit ...hover bezeichnet, wird die animation, die rückwärts läuft Teils garnicht oder nur zum Teil ausgeführt.

    Hier der Code:

    HTML-Code:
    <html>
  <head>
    <style>
      .background {
        position: absolute;
        left: 400;
        top: 300;
        height: 0;
        width: 0;
        opacity: 0;
        background: #0b0b0b;
        -webkit-box-shadow: 0px 0px 5px 0px ;
        -moz-box-shadow: 0px 0px 5px 0px ;
        box-shadow: 0px 0px 5px 0px ; 
        z-index: 0;
      }
      .brightbg { position: absolute; top: 155; left: 50; width: 700; height: 400; display: none; background: #fff; z-index: 1; }
      
      .projectspic { position: absolute; top: 355; left: 50; height: 0; width: 140; z-index: 3; }
      .designpic { position: absolute; top: 355; left: 190; height: 0; width: 140; z-index: 3; }
      .servicepic { position: absolute; top: 355; left: 330; height: 0; width: 140; z-index: 3; }
      .webpic { position: absolute; top: 355; left: 470; height: 0; width: 140; z-index: 3; }
      .marketingpic { position: absolute; top: 355; left: 610; height: 0; width: 140; z-index: 3; }
      .projectstext { position: absolute; top: 355; left: 50; height: 0; width: 140; z-index: 3; }
      .designtext { position: absolute; top: 355; left: 190; height: 0; width: 140; z-index: 3; }
      .servicetext { position: absolute; top: 355; left: 330; height: 0; width: 140; z-index: 3; }
      .webtext { position: absolute; top: 355; left: 470; height: 0; width: 140; z-index: 3; }
      .marketingtext { position: absolute; top: 355; left: 610; height: 0; width: 140; z-index: 3; }
      
      .projectspickons { position: absolute; top: 155; left: 50; height: 200; width: 140; display: none; z-index: 2; }
      .designpickons { position: absolute; top: 155; left: 190; height: 200; width: 140; display: none; z-index: 2; }
      .servicepickons { position: absolute; top: 155; left: 330; height: 200; width: 140; display: none; z-index: 2; }
      .webpickons { position: absolute; top: 155; left: 470; height: 200; width: 140; display: none; z-index: 2; }
      .marketingpickons { position: absolute; top: 155; left: 610; height: 200; width: 140; display: none; z-index: 2; }
      .projectstextkons { position: absolute; top: 355; left: 50; height: 200; width: 140; display: none; z-index: 2; }
      .designtextkons { position: absolute; top: 355; left: 190; height: 200; width: 140; display: none; z-index: 2; }
      .servicetextkons { position: absolute; top: 355; left: 330; height: 200; width: 140; display: none; z-index: 2; }
      .webtextkons { position: absolute; top: 355; left: 470; height: 200; width: 140; display: none; z-index: 2; }
      .marketingtextkons { position: absolute; top: 355; left: 610; height: 200; width: 140; display: none; z-index: 2; }
      
      .projectshover { position: absolute; top: 155; left: 50; width: 140; height: 400; display: none; z-index: 4; }
      .designhover { position: absolute; top: 155; left: 190; width: 140; height: 400; display: none; z-index: 4; }
      .servicehover { position: absolute; top: 155; left: 330; width: 140; height: 400; display: none; z-index: 4; }
      .webhover { position: absolute; top: 155; left: 470; width: 140; height: 400; display: none; z-index: 4; }
      .marketinghover { position: absolute; top: 155; left: 610; width: 140; height: 400; display: none; z-index: 4;}
    </style>
    <script src="js/jquery.js"></script>
    <script>
      $(document).ready(function() {
        $("#background").animate({
          width: 790,
          height: 490,
          top: 105,
          left: 5, 
          opacity: 1
        }, 500, function() {
          showNavi();
        });
      });
      function showNavi() {
        $("#projectspic").animate({ top: 155, height: 200 },250,function() {
          $("#projectstext").animate({ height: 200 }, 250, function() { });
          $("#designpic").animate({ top: 155, height: 200 }, 250, function() {
            $("#designtext").animate({ height: 200 }, 250, function() { });
            $("#servicepic").animate({ top: 155, height: 200 }, 250, function() {
              $("#servicetext").animate({ height: 200 }, 250, function() { });
              $("#webpic").animate({ top: 155, height: 200 }, 250, function() { 
                $("#webtext").animate({ height: 200 }, 250, function() { });
                $("#marketingpic").animate({ top: 155, height: 200 }, 250, function() { 
                  $("#marketingtext").animate({ height: 200 }, 250, function() {
                    $("#brightbg").show(function() {
                      $("#marketingpic").animate({ opacity: 0.5 }, 10, function() {
                        $("#marketingpic").animate({ opacity: 1 }, 500, function() { });
                        $("#webpic").animate({ opacity: 0.5 }, 10, function() { 
                          $("#webpic").animate({ opacity: 1 }, 500, function() { });
                          $("#servicepic").animate({ opacity: 0.5 }, 10, function() { 
                            $("#servicepic").animate({ opacity: 1 }, 500, function() { });
                            $("#designpic").animate({ opacity: 0.5 }, 10, function() { 
                              $("#designpic").animate({ opacity: 1 }, 500, function() { });
                              $("#projectspic").animate({ opacity: 0.5 }, 10, function() {
                                $("#projectspic").animate({ opacity: 1 }, 500, function() { 
                                  $("#projectspickons").show();
                                  $("#designpickons").show();
                                  $("#servicepickons").show();
                                  $("#webpickons").show();
                                  $("#marketingpickons").show();
                                });
                              });
                            });
                          });
                        });
                      });
                      $("#marketingtext").animate({ opacity: 0.5 }, 10, function() {
                        $("#marketingtext").animate({ opacity: 1 }, 500, function() { });
                        $("#webtext").animate({ opacity: 0.5 }, 10, function() { 
                          $("#webtext").animate({ opacity: 1 }, 500, function() { });
                          $("#servicetext").animate({ opacity: 0.5 }, 10, function() { 
                            $("#servicetext").animate({ opacity: 1 }, 500, function() { });
                            $("#designtext").animate({ opacity: 0.5 }, 10, function() { 
                              $("#designtext").animate({ opacity: 1 }, 500, function() { });
                              $("#projectstext").animate({ opacity: 0.5 }, 10, function() { 
                                $("#projectstext").animate({ opacity: 1 }, 500, function() { 
                                  $("#projectstextkons").show();
                                  $("#designtextkons").show();
                                  $("#servicetextkons").show();
                                  $("#webtextkons").show();
                                  $("#marketingtextkons").show();
                                  $("#projectshover").show();
                                  $("#designhover").show();
                                  $("#servicehover").show();
                                  $("#webhover").show();
                                  $("#marketinghover").show();
                                });
                              });
                            });
                          });
                        });
                       });
                    });
                  });
                });
              });
            });
          });
        });
      }
      function hideNavi() {
        $("#projectspic").hide();
        $("#designpic").hide();
        $("#servicepic").hide();
        $("#webpic").hide();
        $("#marketingpic").hide();
        $("#projectstext").hide();
        $("#designtext").hide();
        $("#servicetext").hide();
        $("#webtext").hide();
        $("#marketingtext").hide();
        $("#projectshover").hide();
        $("#designhover").hide();
        $("#servicehover").hide();
        $("#webhover").hide();
        $("#marketinghover").hide();
        $("#brightbg").hide();
        $("#marketingtextkons").stop().delay(500).animate({ top: 555, height: 0 }, 250, function() {
          $("#marketingpickons").stop().animate({ height: 0 }, 250, function() { });
          $("#webtextkons").stop().animate({ top: 555, height: 0 }, 250, function() {
            $("#webpickons").stop().animate({ height: 0 }, 250, function() { });
            $("#servicetextkons").stop().animate({ top: 555, height: 0 }, 250, function() { 
              $("#servicepickons").stop().animate({ height: 0 }, 250, function() { });
              $("#designtextkons").stop().animate({ top: 555, height: 0 }, 250, function() {
                $("#designpickons").stop().animate({ height: 0 }, 250, function() { });
                $("#projectstextkons").stop().animate({ height: 0, top: 555 }, 250, function() {
                  $("#projectspickons").stop().animate({ height: 0 }, 250, function() {
                    $("#projectspic").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#designpic").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#servicepic").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#webpic").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#marketing").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#projectstext").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#designtext").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#servicetext").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#webtext").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                    $("#marketingtext").stop().animate({ top: 355, height: 0 }, 1, function() { $(this).show(); });
                  });
                });
              });
            });
          });
        });
      }
      function mover(obj) {
        objpic = "#" + obj + "pic";
        objtext = "#" + obj + "text";
        $(objpic).stop().animate({ height: 0 }, 250, function() { });
        $(objtext).stop().animate({ height: 0, top: 550 }, 250, function() { });
      }
      function mout(obj) {
        objpic = "#" + obj + "pic";
        objtext = "#" + obj + "text";
        objpickons = "#" + obj + "pickons";
        objtextkons = "#" + obj + "textkons";
        $(objpickons).stop().animate({ opacity: 0.5 }, 10, function() {
          $(objpickons).stop().animate({ opacity: 1 }, 350, function() {
            $(objpic).stop().animate({ height: 200 }, 1, function() { });
          });
        });
        $(objtextkons).stop().animate({ opacity: 0.5 }, 10, function() {
          $(objtextkons).stop().animate({ opacity: 1 }, 350, function() {
            $(objtext).stop().animate({ height: 200, top: 355 }, 1, function() { });
          });
        });
      }
    </script>
  </head>
  <body>
    <div id="background" class="background"></div>
    <div id="brightbg" class="brightbg"></div>
    <img src="Bilder/home_06.gif" class="projectspic" id="projectspic" />
    <img src="Bilder/home_07.gif" class="designpic" id="designpic" />
    <img src="Bilder/home_08.gif" class="servicepic" id="servicepic" />
    <img src="Bilder/home_09.gif" class="webpic" id="webpic" />
    <img src="Bilder/home_10.gif" class="marketingpic" id="marketingpic" />
    <img src="Bilder/home_12.gif" class="projectstext" id="projectstext" />
    <img src="Bilder/home_13.gif" class="designtext" id="designtext" />
    <img src="Bilder/home_14.gif" class="servicetext" id="servicetext" />
    <img src="Bilder/home_15.gif" class="webtext" id="webtext" />
    <img src="Bilder/home_16.gif" class="marketingtext" id="marketingtext" />
    
    <img src="Bilder/home_06.gif" class="projectspickons" id="projectspickons" />
    <img src="Bilder/home_07.gif" class="designpickons" id="designpickons" />
    <img src="Bilder/home_08.gif" class="servicepickons" id="servicepickons" />
    <img src="Bilder/home_09.gif" class="webpickons" id="webpickons" />
    <img src="Bilder/home_10.gif" class="marketingpickons" id="marketingpickons" />
    <img src="Bilder/home_12.gif" class="projectstextkons" id="projectstextkons" />
    <img src="Bilder/home_13.gif" class="designtextkons" id="designtextkons" />
    <img src="Bilder/home_14.gif" class="servicetextkons" id="servicetextkons" />
    <img src="Bilder/home_15.gif" class="webtextkons" id="webtextkons" />
    <img src="Bilder/home_16.gif" class="marketingtextkons" id="marketingtextkons" />
    
    <img src="Bilder/spacer.png" class="projectshover" id="projectshover" />
    <img src="Bilder/spacer.png" class="designhover" id="designhover" />
    <img src="Bilder/spacer.png" class="servicehover" id="servicehover" />
    <img src="Bilder/spacer.png" class="webhover" id="webhover" />
    <img src="Bilder/spacer.png" class="marketinghover" id="marketinghover" />
    <script>
      $("#projectshover").mouseenter(function() {
        mover('projects');
      });
      $("#designhover").mouseenter(function() {
        mover('design');
      });
      $("#servicehover").mouseenter(function() {
        mover('service');
      });
      $("#webhover").mouseenter(function() {
        mover('web');
      });
      $("#marketinghover").mouseenter(function() {
        mover('marketing');
      });
      $("#projectshover").mouseout(function() {
        mout('projects');
      });
      $("#designhover").mouseout(function() {
        mout('design');
      });
      $("#servicehover").mouseout(function() {
        mout('service');
      });
      $("#webhover").mouseout(function() {
        mout('web');
      });
      $("#marketinghover").mouseout(function() {
        mout('marketing');
      });
      $("#projectshover").click(function() {
        hideNavi();
      });
      $("#designhover").click(function() {
        hideNavi();
      });
      $("#servicehover").click(function() {
        hideNavi();
      });
      $("#webhover").click(function() {
        hideNavi();
      });
      $("#marketinghover").click(function() {
        hideNavi();
      });
    </script>
  </body>
</html>
    Ich weiß, dass der code recht umfangreich ist, trotzdem würde ich mich über jede Hilfe freuen, da ich bereits zum zweiten mal angefangen habe und langsam verzweifel.

    lg weedo
    Angehängte Dateien Angehängte Dateien
     
    Das Kennzeichen eines unreifen Menschen ist,
    dass er nobel für eine Sache sterben will,
    während der reife Mensch nobel für eine Sache lebt.
    Zitieren Zitieren
« Formularverarbeitung mit jquery, Ajax und Weiterleitung an PHP | return im object »

Ähnliche Themen

  1. JQuery - Animationen werden zu oft ausgeführt
    Von weedo im Forum Javascript & Ajax
    Antworten: 2
    Letzter Beitrag: 24.03.11, 16:47
  2. XP Prof: Vorgang "read" konnte nicht auf dem Speicher durchgeführt werden.
    Von revolucion im Forum Office-Anwendungen
    Antworten: 10
    Letzter Beitrag: 21.12.10, 18:12
  3. Abfragen die nicht durchgeführt werden?
    Von Katzehuhn im Forum PHP
    Antworten: 0
    Letzter Beitrag: 24.06.06, 13:49
  4. Thumbnails werden nicht korrekt angezeigt!
    Von coral im Forum CSS
    Antworten: 2
    Letzter Beitrag: 02.10.05, 18:12
  5. Umlaute werden nicht korrekt angezeigt
    Von JoFl im Forum Linux & Unix
    Antworten: 1
    Letzter Beitrag: 01.01.03, 17:10