• Das Erstellen neuer Accounts wurde ausgesetzt. Bei berechtigtem Interesse bitte Kontaktaufnahme über die üblichen Wege. Beste Grüße der Admin

[SCRIPTSUCHE] Brauche Hilfe bei einem Animations Script !

K

kwkurzer

New member
Hey,

Ich habe ein kleines Problem, dass ich eine Animation in einer schleife abspielen möchte.
Dies funktioniert auch gut, nur....

Sobald ein Button geklickt wurde, soll die laufende Animation gestoppt werden.
Beim klick auf einen zurück Button soll die Animation wieder starten bzw. weiter laufen.

Bin noch blutiger Anfänger und benötig hilfe.

Die animation sieht ungefähr so aus:

Code: 
function a(){
		$('#sitemap_btn_1').addClass('active');
		$('#sitemap_btn_2').removeClass('active');
		$('#sitemap_btn_3').removeClass('active');
			$('#start1_note').fadeIn(700);
			$('#start1_btn_4').delay(700).fadeIn(1000);
			$('#start1_btn_9').delay(1600).fadeIn(1000);
			$('#start1_btn_12').delay(1600).fadeIn(1000);
			$('#start1_btn_10').delay(2300).fadeIn(1000);
			$('#start1_btn_3').delay(3000).fadeIn(1000);
			$('#start1_btn_5').delay(3000).fadeIn(1000);
			$('#start1_btn_11').delay(3000).fadeIn(1000);
			$('#start1_btn_6').delay(3700).fadeIn(1000);
			$('#start1_btn_2').delay(4200).fadeIn(1000);
			$('#start1_btn_1').delay(5000).fadeIn(1000);
			$('#start1_btn_7').delay(5000).fadeIn(1000);
			$('#start1_btn_13').delay(5900).fadeIn(1000);
			$('#start1_btn_14').delay(5900).fadeIn(1000);
			$('#start1_btn_8').delay(6300).fadeIn(1000);
			$('#start1_btn_15').delay(6300).fadeIn(1000);
			$('#start1_btn_16').delay(6700).fadeIn(1000);
		$('[id^="start2"]').stop().hide();
		$('[id^="start3"]').stop().hide();
}

function b(){
		$('#sitemap_btn_1').removeClass('active');
		$('#sitemap_btn_2').addClass('active');
		$('#sitemap_btn_3').removeClass('active');
		$('[id^="start1"]').stop().hide();
			$('#start2_note').fadeIn(700);
			$('#start2_btn_14').delay(700).fadeIn(1000);
			$('#start2_btn_12').delay(1600).fadeIn(1000);
			$('#start2_btn_13').delay(1600).fadeIn(1000);
			$('#start2_btn_16').delay(1600).fadeIn(1000);
			$('#start2_btn_7').delay(2300).fadeIn(1000);
			$('#start2_btn_10').delay(2300).fadeIn(1000);
			$('#start2_btn_4').delay(3000).fadeIn(1000);
			$('#start2_btn_15').delay(3000).fadeIn(1000);
			$('#start2_btn_3').delay(3700).fadeIn(1000);
			$('#start2_btn_6').delay(4200).fadeIn(1000);
			$('#start2_btn_9').delay(4200).fadeIn(1000);
			$('#start2_btn_11').delay(4200).fadeIn(1000);
			$('#start2_btn_1').delay(5000).fadeIn(1000);
			$('#start2_btn_2').delay(5900).fadeIn(1000);
			$('#start2_btn_5').delay(6300).fadeIn(1000);
			$('#start2_btn_8').delay(6700).fadeIn(1000);
		$('[id^="start3"]').stop().hide();
}

function c(){
		$('#sitemap_btn_1').removeClass('active');
		$('#sitemap_btn_2').removeClass('active');
		$('#sitemap_btn_3').addClass('active');
		$('[id^="start1"]').stop().hide();
		$('[id^="start2"]').stop().hide();
			$('#start3_note').fadeIn(700);
			$('#start3_btn_9').delay(700).fadeIn(1000);
			$('#start3_btn_1').delay(1600).fadeIn(1000);
			$('#start3_btn_4').delay(1600).fadeIn(1000);
			$('#start3_btn_15').delay(1600).fadeIn(1000);
			$('#start3_btn_3').delay(2300).fadeIn(1000);
			$('#start3_btn_16').delay(2300).fadeIn(1000);
			$('#start3_btn_2').delay(3000).fadeIn(1000);
			$('#start3_btn_7').delay(3700).fadeIn(1000);
			$('#start3_btn_13').delay(3700).fadeIn(1000);
			$('#start3_btn_5').delay(4200).fadeIn(1000);
			$('#start3_btn_14').delay(4200).fadeIn(1000);
			$('#start3_btn_6').delay(5000).fadeIn(1000);
			$('#start3_btn_12').delay(5900).fadeIn(1000);
			$('#start3_btn_11').delay(6300).fadeIn(1000);
			$('#start3_btn_8').delay(6700).fadeIn(1000);
			$('#start3_btn_10').delay(6700).fadeIn(1000);
}

Diese Funktionen sollen nacheinander ablaufen und bei Klick auf...

Code: 
$(document).ready(function(){
  $('#start1_btn_14').click(function(){
	$('[id^="start1"]').stop().hide();
	$('[id^="start2"]').stop().hide();
	$('[id^="start3"]').stop().hide();
	$('[id^="sitemap"]').fadeOut(500);
	$('[class^="infopic"]').fadeOut(500);
	$('#back_btn').fadeIn(500);
	/** START ANIMATION **/
	$('#wilawand_first_a').fadeIn(1000);
		$('#wilawand_first_a').fadeIn(1000);
		$('#wilawand_second_a').hide();
		$('#wilawand_third_a').hide();
		$('#wilawand_first_b').hide();
		$('#wilawand_second_b').fadeIn(1000);
		$('#wilawand_third_b').fadeIn(1000);
		$('#wilawand_note').fadeIn(1000);
  });
});

... soll die Animations-Schleife stoppen.
Der zurück Button funktioniert schon nur das stoppen der Animation nicht.

Danke schon mal für euere Hilfe.
 
Hey,

ich bezweifel gerade die Performance Deines Vorhabens - aber das war nicht die Frage. :D

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.
Zum Vergrößern anklicken....

Demnach müsstest Du eine Bedingung schaffen, die vor jedem Deiner delays prüft, ob noch ausgeführt werden soll. Rein für DEMO-Zwecke (nicht produktiv) solltest Du eine globale Variable setzen, deren Inhalt in Deinen Funktionen a, b, c vor jeder .delay()-Zeile abgefragt wird. Sollte eine Abbruchaufforderung (kommt über einen Klick auf einen anderen Button) enthalten sein, steigst Du aus der jeweiligen Funktion aus.

Das ist übelst dreckig - aber soll Dir zwei Dinge zeigen:
- globale Variablen sind zu vermeiden (nicht nur aus Performance-Sicht)
- Deine Lösung wirkt mächtig unperformant

Und: In Deinen Funktionen lassen sich einige Zeilen zusammenlegen. So wäre - als Beispiel - Dein DOMready kürzer (warum eig. doppelt fadeIn() für #wilawand_first_a?):
Code: 
$('[id^="start1"]').stop().hide();
$('[id^="start2"], [id^="start3"]').stop().hide();
$('[id^="sitemap"], [class^="infopic"]').fadeOut(500);
$('#back_btn').fadeIn(500);
/** START ANIMATION **/
$('#wilawand_first_a').fadeIn(1000);
$('#wilawand_second_a, #wilawand_third_a, #wilawand_first_b').hide();
$('#wilawand_second_b, #wilawand_third_b, #wilawand_note').fadeIn(1000);

Könntest Du vielleicht mal ein jsfiddle einstellen, damit man besser sieht, was sich da wie animieren soll? Vielleicht findet man schlichtweg eine bessere Lösung.

Ansonsten: Viel Erfolg.
 
Vielen Dank für die schnelle Antwort. Da ich im Thema Scripte noch Mega unerfahren bin, bin ich sehr froh über dieses Forum. Learning by doing. :) Danke erstmal.
 
Hier wäre die Beispielseite.

andre krause

Code: 
<div class="pic" id="start1_btn_1" style="margin: 39px 0 0 97px"><img src="pictures/start1_r1_c1.jpg" width="183" height="111"></div>
<div class="pic" id="start1_btn_2" style="margin: 156px 0 0 0"><img src="pictures/start1_r1_c2.jpg" width="280" height="137"></div>
<div class="pic" id="start1_btn_3" style="margin: 299px 0 0 84px"><img src="pictures/start1_r1_c3.jpg" width="196" height="98"></div>
<div class="pic" id="start1_btn_4" style="margin: 0 0 0 286px"><img src="pictures/start1_r2_c1.jpg" width="351" height="222"></div>
<div class="pic" id="start1_btn_5" style="margin: 227px 0 0 286px"><img src="pictures/start1_r2_c2.jpg" width="130" height="79"></div>
<div class="pic" id="start1_btn_6" style="margin: 312px 0 0 286px"><img src="pictures/start1_r2_c3.jpg" width="104" height="53"></div>
<div class="pic" id="start1_btn_7" style="margin: 227px 0 0 422px"><img src="pictures/start1_r2_c4.jpg" width="352" height="144"></div>
<div class="pic" id="start1_btn_8" style="margin: 156px 0 0 643px"><img src="pictures/start1_r2_c5.jpg" width="131" height="66"></div>
<div class="pic" id="start1_btn_9" style="margin: 104px 0 0 695px"><img src="pictures/start1_r2_c6.jpg" width="79" height="46"></div>
<div class="pic" id="start1_btn_10" style="margin: 52px 0 0 695px"><img src="pictures/start1_r2_c7.jpg" width="79" height="46"></div>
<div class="pic" id="start1_btn_11" style="margin: 85px 0 0 779px"><img src="pictures/start1_r3_c1.jpg" width="91" height="53"></div>
<div class="pic" id="start1_btn_12" style="margin: 143px 0 0 779px"><img src="pictures/start1_r3_c2.jpg" width="235" height="313"></div>
<div class="pic" id="start1_btn_13" style="margin: 78px 0 0 1020px"><img src="pictures/start1_r4_c1.jpg" width="144" height="189"></div>
<div class="pic" id="start1_btn_14" style="margin: 273px 0 0 1020px"><img src="pictures/start1_r4_c2.jpg" width="280" height="144"></div>
<div class="pic" id="start1_btn_15" style="margin: 201px 0 0 1170px"><img src="pictures/start1_r4_c3.jpg" width="130" height="66"></div>
<div class="pic" id="start1_btn_16" style="margin: 143px 0 0 1170px"><img src="pictures/start1_r4_c4.jpg" width="104" height="52"></div>
<div class="startnote" id="start1_note" style="margin: 0 0 0 1020px">Messe- und Interiordesign<br>
Visualisierungen<br>
Industrial Design
</div>

Diese Div Container (class: pic) sollen beim Start der Seite animiert werden und beim Klick auf ein Button kommt die Unterseite und die Animation stoppt.
Einfach mal anschauen. Die Animation stoppt nur nicht. Daher benötige ich hilfe. Vielleicht eine viel bessere Idee?
 
Kurzes Googeln findet dieses:
Pause
Damit müsstest Du dein Problem lösen können.
Wenn Du die Animation unwiderruflich stoppen, d. h. nicht später weiterlaufen lassen willst, reicht auch die jQuery-Funktion stop() aus.
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben