zurück zur Startseite
  


Zurück XHTMLforum > Webentwicklung (außer XHTML und CSS) > Javascript & Ajax
Seite neu laden waypoint - animate.css - settimeout - bitte Hilfe

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 27.07.2015, 13:15
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard waypoint - animate.css - settimeout - bitte Hilfe

Hallo ins Forum,

ich habe folgendes HTML
HTML-Code:
<div id="test">
  <p class="animated">Absatz 1</p>
  <p class="animated">Absatz 2</p>
  <p class="animated">Absatz 3</p>
</div>
welches ich mit waypoints und animate.css animiere. Das funktioniert soweit auch prima. Alle drei Absätze werden gleichzeitig eingeblendet.
Code:
$(document).ready(function(){ 
	$("#test").waypoint(function() {
		$("p.animated").addClass("fadeInUp");
	}, {offset: 'bottom-in-view'});
});
Nun hätte ich aber gerne, dass die Absätze nacheinander und nicht gleichzeitig animiert werden. Hierzu sollte man das verwenden:
Code:
setTimeout(function(){
  $(this).addClass('fadeInUp');
}, 500 * i);
Ich weiß nun aber leider nicht wie ich das in meinen Code einbaue. Kann mir hier jemand helfen?

Vielen Dank und Gruß
mimii
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 27.07.2015, 13:23
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ich weiß nicht was waypoint ist, aber i.d.R. haben Animationsfunktion in jQuery Callbackfunktionen, die aufgerufen werden, wenn die Animation beendet ist. Hast du mal in der Doku nach so einer Funktion geschaut?
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 27.07.2015, 13:44
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

mit waypoints kann ich sehr einfach bestimmen, wann ein Effekt einsetzt (in Abhängigkeit seiner Position im Viewport). Bei Interesse: Waypoints
In meinem Fall soll dem "p.animated" die Klasse "fadeInUp" hinzugefügt werden, wenn das übergeordnete <div id="test"> komplett im Viewport ist.

Gruß mimii

Geändert von mimii (27.07.2015 um 13:47 Uhr)
Mit Zitat antworten
  #4 (permalink)  
Alt 27.07.2015, 13:52
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Wie gesagt die Doku sollte dir helfen.
Mit Zitat antworten
  #5 (permalink)  
Alt 27.07.2015, 13:55
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Ach gerade schnall ich, dass du gar keine jQuery Animationen benutzt.

Das ist etwas anderes. Da weiss ich nicht, ob das was du willst geht. Da du ja die Klasse aller Elemente änderst, klappt das auch nicht mit dem Code, den du uns gezeigt hast.
Mit Zitat antworten
  #6 (permalink)  
Alt 27.07.2015, 14:12
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Hallo,

danke erst Mal für deine Hilfe. Der Code mit dem waypoint und der addclass funktioniert. Aber es werden halt alle drei Absätze auf einmal eingeblendet. Daher war meine Idee, dass die Klasse "fadeInUp" für jeden einzelnen Absatz erst nach einer gewissen Verzögerung eingefügt wird. Das soll nach meinen Recherchen eben mit dem settimeout möglich sein. Nur weiß ich nicht wie ich das korrekt einbauen muss.
Ich habe es so probiert, aber das funktioniert nicht. Die Klasse "fadeUpIn" wird erst gar nicht mehr reingeschrieben.
Code:
$(document).ready(function(){ 
  $("#test").waypoint(function() {
    setTimeout(function(){
	$("p.animated").addClass("fadeInUp");
    }, 500 * i);
  }, {offset: 'bottom-in-view'});
});
Viele Grüße
mimii

Geändert von mimii (27.07.2015 um 14:17 Uhr)
Mit Zitat antworten
  #7 (permalink)  
Alt 27.07.2015, 14:17
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Naja, dazu kmüsstest du zuerst die Absätze einzeln ansprechen und dann den gezeigten Code benutzen. Aber nicht mit this, sondern mit dem entsprechenden Element.

Das ganze geht aber doch sauberer mit events, hier habe ich mal kurz gesucht und gefunden How to Capture CSS3 Animation Events in JavaScript

du musst also jedes Element einzeln ansprechen, dann einen Event setzen, der bei 'animationend' dem nächsten Element die Klasse zuweist und so weiter.
Mit Zitat antworten
  #8 (permalink)  
Alt 27.07.2015, 14:40
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Als kleine Fingerübung:
Code:
<!DOCTYPE html>
<html>
  <head>
    <title></title>
	  
<style type="text/css">
	
#anim p.enable
{
	-webkit-animation: flash 1s ease 3;
	-moz-animation: flash 1s ease 3;
	-ms-animation: flash 1s ease 3;
	-o-animation: flash 1s ease 3;
	animation: flash 1s ease 3;
}

@keyframes flash {
	50% { opacity: 0; }
}

</style>

</head>
<body>
  
<div id="anim">
  <p>Absatz 1</p>
  <p>Absatz 2</p>
  <p>Absatz 3</p>
</div>
<script>
var qwery = function(S, P){return [].slice.call((P||document).querySelectorAll(S))};

anim(qwery('#anim p '));
function anim(el){
	if(!el.length) return;
	var first = el.shift();
	first.addEventListener('animationend', function() {anim(el); }, false);
	first.className = 'enable'
}
</script>
</body>
</html>

Geändert von protonenbeschleuniger (27.07.2015 um 14:43 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 27.07.2015, 17:01
Benutzerbild von mimii
Erfahrener Benutzer
XHTMLforum-Mitglied
Thread-Ersteller
 
Registriert seit: 15.08.2005
Beiträge: 181
mimii befindet sich auf einem aufstrebenden Ast
Standard

Vielen Dank für deine Bemühungen,

die Animation krieg ich ja durch das "animate.css". Hier ist das mit den keyframes und der Animationsdauer alles geregelt. Damit animate.css startet wird zum einen die Klasse "animated" benötigt. Die steht ja schon im <p> drin, zum anderen eben die Klasse "fadeInUp" und genau diese muss eben zeitverzögert nacheinander zusätzlich ins <p> rein.

Bei Interesse:https://daneden.github.io/animate.css/

Ich habe mal n fiddle gebaut: http://jsfiddle.net/mimii/xj9hg6fa/26/
Wenn man scrollt und der Bottom vom <div id="test"> sichtbar ist, startet die Animation.

Viele Grüße
mimii

Geändert von mimii (27.07.2015 um 18:53 Uhr)
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 27.07.2015, 20:00
Benutzerbild von protonenbeschleuniger
Verbesserer
XHTMLforum-Kenner
 
Registriert seit: 06.09.2007
Beiträge: 4.977
protonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblickprotonenbeschleuniger ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von mimii Beitrag anzeigen
die Animation krieg ich ja durch das "animate.css".
Das ist genau das, was mein Beispielcode zeigt
Mit Zitat antworten
Sponsored Links
Antwort

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Hilfe gesucht beim erstellen meiner Startseite..... eBase2009 CSS 17 25.06.2009 23:07
[Fehler] setTimeout innerhalb einer Klasse Lord-Sfx Javascript & Ajax 2 08.04.2009 01:37
Kontaktformular Hilfe nötig :) sunny55 CSS 2 05.08.2008 20:29
HILFE, ich brauche Hilfe von Profis! frambuesa CSS 13 13.06.2008 23:46
Bitte um Hilfe bei CSS-Einbindung Anfänger CSS 13 08.08.2007 21:37


Alle Zeitangaben in WEZ +2. Es ist jetzt 12:20 Uhr.