[GELÖST] Animate Curtains Opening with jQuery - click Funktion ändern

[ralfsg]

Hallo zusammen,

ich stehe als absoluter Newbie vor der schweren Aufgabe, die Animation eines Vorhangs, der sich durch Mausklick öffnet so umzuändern, dass er sich nach etwa 2 Sekunden von sebst öffnet. Ich habe als Grundlage dies hier gefunden, für meine Bedürfnisse angepasst und getestet (was auch hervorragend funktioniert): Animate Curtains Opening with jQuery « Build Internet
Ich würde jetzt aber gerne, dass das Seil verschwindet und sich der Vorhang so ca. nach 2 Sekunden von selbst öffnet. Leider weiß ich nicht wie ich das bewerkstelligen soll.
In der index.html ist folgendes Script, das ich vermutlich entsprechend ändern muss:

<script type="text/javascript">
		$(document).ready(function() {
		
			$curtainopen = false;
		
			$(".rope").click(function(){
				$(this).blur();
				if ($curtainopen == false){ 
					$(this).stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
					$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
					$(".rightcurtain").stop().animate({width:'60px'},2000 );
					$curtainopen = true;
				}else{
					$(this).stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
					$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
					$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
					$curtainopen = false;
				}
				return false;
			});
			
		});	
	</script>

Ich wäre echt dankbar, wenn mir jemand helfen könnte!

 

[miniA4kuser]

Moin, bitte benutze die

-Tags wenn du Code postest.
Zu deinem Problem würde ich spontan zu [URL=http://de.selfhtml.org/javascript/objekte/window.htm#set_timeout]selfhtml...setTimeout()[/URL] greifen. Jedoch würde ich statt der Variable [INLINE]$curtainopen[/INLINE] die Information als Objekt an das Element speichern:[CODE]$(document).ready(function () {
	$('.rope').data('curtain', {
		open: false,
		timeout: null
	}).click(function (event) {
		var $element = $(this),
			curtain = $element.data('curtain');

		event.preventDefault();
		$element.blur();
		if (curtain.open === false){ 
			clearTimeout(curtain.timeout);
			$element.stop().animate({top: '0px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
			curtain.timeout = setTimeout(function () {
				$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
				$(".rightcurtain").stop().animate({width:'60px'},2000 );
			}, 2000);
			curtain.open = true;
			$element.data(curtain);
		}else{
			clearTimeout(curtain.timeout);
			$element.stop().animate({top: '-40px' }, {queue:false, duration:350, easing:'easeOutBounce'}); 
			curtain.timeout = setTimeout(function () {
				$(".leftcurtain").stop().animate({width:'50%'}, 2000 );
				$(".rightcurtain").stop().animate({width:'51%'}, 2000 );
			}, 500);
			curtain.open = false;
			$element.data(curtain);
		}
		return false;
	});
});

PS: 2 Sekunden sind schon arg lange für ungeduldige Benutzer
PPS: event.preventDefault() unterbindet die Standardaktion des Links, wobei <a href="#" ... Blödsinn ist

 

[kkapsner]

@miniA4kuser: Ich glaub', du hast das falsch verstanden. Ich hab' das so verstanden, dass man gar nicht mehr klicken müssen soll, sondern der Vorhang von alleine aufgeht.

@ralfsg: Wenn du das Seil nicht haben willst, musst du das im HTML entfernen. Also das <a class="rope">. Dann ist window.setTimeout() natürlich die richtige Wahl, um das verzögert auszuführen:

<script type="text/javascript">
	$(document).ready(function() {
		window.setTimeout(
			function(){
				$(".leftcurtain").stop().animate({width:'60px'}, 2000 );
				$(".rightcurtain").stop().animate({width:'60px'}, 2000);
			},
			2000
		);
	});	
</script>

Da du auch nicht mehr schließen willst, wird der Code viel einfacher und kürzer.

 

[miniA4kuser]

Heheh... da habe ich wohl zu schnell gelesen.

 

[kkapsner]

Kommt vor...

 

[ralfsg]

Hallo ihr zwei,

dickes DANKE! Genauso soll es aussehen - ihr seid meine Retter!
Entschuldigt die späte Reaktion, mich hatte ein hartnäckiger Virus ein Weilchen außer Gefecht gesetzt

 

[kkapsner]

Bitte - gern geschehen.

Entschuldigt die späte Reaktion

Kein Problem.