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:
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
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:
<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
