| Autor |
Nachricht |
creativecat
Threadersteller
Dabei seit: 21.09.2009
Ort: Nürnberg
Alter: -
Geschlecht: 
|
Verfasst Di 29.09.2009 12:50
Titel jQuery animate/fadeOut-Problem |
  |
|
Hallo zusammen,
ich hab ein sehr seltsames Problem auf www.flgm.de (abgesehen davon, dass die Seite eines meiner ersten Projekte war und grafisch ebenfalls dringends Nachholbedarf hat;-) ).
Ich setze jQuery ein, um die Seiten durchsliden zu können.
Das ist die Funktion für einen Klick auf einen Navigationspunkt (wird noch in eine Schleife gepackt, aber aktuell zum testen):
| Code: | $('.navi2').click(function() {
$('.spaceholder').hide(0);
$('.panel').show(0);
$('.scrollContainer').animate( {
"marginLeft": "-100%"},1300);
$("#navigation1,#navigation3,#navigation4,#navigation5,#navigation6,#navigation7").fadeOut(1300, function() {
$('.sh1').show(0);
});
}); |
Grob schaut mein Slider so aus:
| Code: | <div class="scroll">
<div class="scrollContainer">
<div class="spaceholder sh1"></div>
<div class="panel" id="navigation1"></div>
<div class="spaceholder sh2"></div>
<div class="panel" id="navigation2"></div>
(...)
</div>
</div> |
.scroll hat overflow=hidden;
.scrollContainer hat eine ausreichende Breite
.spaceholder, .panel haben float=left;
Klappt auch alles wunderbar soweit.
Die Platzhalter werden sofort ausgeblendet (.spaceholder) und die einzelnen Inhalte an deren Stelle eingeblendet (.panel). Dann wird gleichzeitig innerhalb von 1300 ms die nicht benötigten panels (#navigation1-7) ausgeblendet und gleichzeitig nach links bzw. rechts verschoben. Am Ende werde noch die notwendigen Platzhalter (also alle links vom aktuellen) eingeblendet. Bei .navi3 dann eben die divs .sh1 und .sh2.
Auf www.creativecat.de klappt das alles hervorragend.
Aber bei flgm.de:
Wenn ich von rechts nach links durchgehe, werden einwandfrei die Inhalte eingeslidet. Von links nach rechts geht das aber nicht! Da bedarf es jedesmal einen 2. Klick, ehe der marginLeft stimmt oder der notwendige Platzhalter eingeblendet wird - da weiß ich eben nicht, was nicht stimmt. Laut Konsole in Safari stimmen die einzelnen Angaben und unterscheiden sich auch nicht vor und nach dem 2. Klick:-/
Bin mal wieder am verzweifeln, da ich keinen Fehler finden kann...
Zuletzt bearbeitet von creativecat am Di 29.09.2009 12:52, insgesamt 1-mal bearbeitet
|
|
| |
   |
 |
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
Verfasst Di 29.09.2009 13:13
Titel
|
|
|
ich weiß nicht ob ich dich richtig verstanden habe, aber probier mal folgendes
| Code: | <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<meta http-equiv="Content-type" content="text/html; charset=ISO-8859-1" />
<title>jQuery - Tests</title>
<meta http-equiv="Content-Language" content="de" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="..." />
<style type="text/css" media="all">
* {
margin:0;
padding:0;
}
#slideshow #slidesContainer {
margin:0 auto;
width:560px;
height:263px;
overflow:auto;
position:relative;
}
#slideshow #slidesContainer .slide {
margin:0 auto;
width:540px;
height:263px;
}
.control {
display:block;
width:39px;
height:263px;
text-indent:-10000px;
position:absolute;
cursor:pointer;
}
#leftControl {
top:0;
left:0;
background:transparent url(img/control_left.jpg) no-repeat 0 0;
}
#rightControl {
top:0;
right:0;
background:transparent url(img/control_right.jpg) no-repeat 0 0;
}
</style>
<script type="text/javascript" src="library/jquery-1.2.6.js"></script>
<script type="text/javascript" language="javascript">
<!--
$(document).ready(function() {
var currentPosition = 0;
var slideWidth = 560;
var slides = $('.slide');
var numberOfSlides = slides.length;
$('#slidesContainer').css('overflow','hidden');
slides.wrapAll('<div id="slideInner"></div>').css({
'float':'left',
'width':slideWidth
});
$('#slideInner').css('width', slideWidth * numberOfSlides);
$('#slideshow').prepend('<span class="control" id="leftControl">Links</span>').append('<span class="control" id="rightControl">Rechts</span>');
manageControls(currentPosition);
$('.control').bind('click', function(){
currentPosition = ($(this).attr('id')=='rightControl')?currentPosition + 1 : currentPosition - 1;
manageControls(currentPosition);
$('#slideInner').animate({
'marginLeft' : slideWidth * (-currentPosition)
});
});
function manageControls(position){
if(position==0){ $('#leftControl').hide() }
else{ $('#leftControl').show() }
if(position==numberOfSlides-1){ $('#rightControl').hide()}
else{ $('#rightControl').show()}
}
});
//-->
</script>
</head>
<body>
<div id="slideshow">
<div id="slidesContainer">
<div class="slide" style="background:red;">
test
</div>
<div class="slide" style="background:blue;">
lorem ipsum
</div>
<div class="slide" style="background:green;">
dollar sit amet
</div>
<div class="slide" style="background:red;">
test
</div>
<div class="slide" style="background:blue;">
lorem ipsum
</div>
<div class="slide" style="background:green;">
dollar sit amet
</div>
</div>
</div>
</body>
</html> |
Die Bilder control_left.jpg und control_right.jpg mußt Du Dir noch anlegen.
|
|
| |
|
|
|
Anzeige
|
|
|
creativecat
Threadersteller
Dabei seit: 21.09.2009
Ort: Nürnberg
Alter: -
Geschlecht:
|
Verfasst Di 29.09.2009 13:20
Titel
|
|
|
Hui... danke erst mal für die Antwort...
Da muss ich mich jetzt in der Arbeit erst mal kurz reindenken;-)
Ich hatte vorher ein fertiges Skript (hieß slider.js) genommen, aber ich wollte eben auch die nicht angezeigten Inhalte ausblenden - nicht nur aussliden, damit sich die Höhe des Hintergrundes an den aktuellen Inhalt anpasst.
Aber ich schaue mir das Skript auf jeden Fall später mal an! Danke (hätte aber trotzdem gerne gewusst, warum das fast gleiche Skript auf meiner einen Seite funktioniert und auf der anderen nicht...) 
|
|
| |
|
|
creativecat
Threadersteller
Dabei seit: 21.09.2009
Ort: Nürnberg
Alter: -
Geschlecht:
|
Verfasst Di 29.09.2009 16:23
Titel
|
|
|
Ok, so wie ich mir das jetzt auf die schnelle angeschaut habe, reagiert dieses Skript zunächst ja nur, wenn ich auf einen der beiden Links-/Rechts-Buttons betätige.
Das taugt für mein Ziel nicht, weil ich auf verschiedene Navigationspunkte klicken möchte.
Es stelllt sich mir nach wir vor die Frage, wo sich ein Fehler in meinem Skript befindet.
Das dann in eine Schleife einzubauen, ist kein Problem, aber es soll erst mal "manuell" laufen:-(
Über weitere Tips wäre ich auch froh;-)
|
|
| |
|
|
creativecat
Threadersteller
Dabei seit: 21.09.2009
Ort: Nürnberg
Alter: -
Geschlecht:
|
Verfasst Di 29.09.2009 17:00
Titel
|
|
|
So, jetzt hab ich den Fehler gefunden.
Beim Skript vorher habe ich anders gearbeitet und href="#xyz" noch gehabt. Hab das Ganze jetzt nur auf die Bilder gelegt (also den Link einfach entfernt) und jetzt klappt das.
Muss ich hald nur wieder ein noscript einfügen, damit das da auch Sinn Macht...
Also danke für den Tipp... und vielleicht konnte ich jemand anderem ja doch irgendwann damit auch helfen.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
[jQuery] .after mit .fadeIn().fadeOut() ?
[jQuery] - animate/backgroundColor
jQuery: fadeTo bzw. animate(opacity) geht nicht im IE
Flash / Hintergrund abdunkeln / Fadeout
Problem mit CSS & JQuery
problem mit jquery und ie
|
|
Willkommen auf dem Portal für Mediengestalter
