php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 22-06-2012, 13:25
mcmurphy
 PHP Junior
Links : Onlinestatus : mcmurphy ist offline
Registriert seit: Aug 2003
Ort: Berlin
Beiträge: 890
mcmurphy zeigte ein beschämendes Verhalten in der Vergangenheit
Standard jquery animations sequence callback

Hi,
habe folgendes Problem:
ich will über eine Liste eine Animation ausführen:
die einzelnen li sollen nacheinander einfaden und nach dem Fade noch gestylt werden.
Das Styling kann sich je nach Listen element unterscheiden.
Das sequenzielle Einfaden habe ich hinbekommen:
PHP-Code:
<div id="right_box">

<
ul>
<
li>punkt1</li>
<
li>punkt2</li>
<
li>punkt3</li>
<
li id="separator"><!-- wäre ne Trennlinie mit background-image per css -></li>
<
li id="last_element>noch en punkt...</li>
</ul>
</div> 
PHP-Code:
function animate_right_box_lis(){
   var 
lis =  $('#right_box ul li');
   var 
0;
   (function() {  
       $(
lis[i++] || []).fadeIn('slow',arguments.callee);  
   })(); 

Hier wird ein Array mit den Elementen in der anonymen Funktion aufgerufen.
Als Callback von fadeIn wird die anonyme Funktion mit arguments.callee wieder mit dem nächsten Element aufgerufen (soweit habe ich den Code zumindest verstanden).
(quelle: Quick Tip: Easy Sequential Animations in jQuery | Nettuts+)

Ich will aber nicht einfach nur einfaden sondern nach dem Fade noch ein weiter Aktion auf dem Element ausführen.
Den Callback von fadeIn kann ich ja nicht verwenden da damit ja schon der nächste Step der anonymen Funktion ausgeführt wird.

Also habe ich versucht eine eigene Funktion zu bauen, welche wie FadeIn einen Callback ausführt - und kläglich gescheitert.
Hier mal ein Versuch:
PHP-Code:
function animate_right_box_lis(){
  var 
lis =  $('#right_box ul li');
  var 
0;
  (function() {  
     $(
lis[i++] || []).animate_single_li(arguments.callee);  
  })(); 

}
$.
fn.animate_single_li = function() { 
  $(
this).fadeIn('slow',function(){
    $(
this).addClass('white_check'); 
  });          

damit würde aber nur das erste Element animiert.

Ich vermute mal schwer das meiner Funktion ein Callback fehlt...

Also gegoogelt und diese Konstruct gefunden:
function meineFunktion(parameter1, parameter2, callback)
{
alert('Diese Funktion macht nichts außer '+ (parameter1+parameter2*3) + ' ausgeben';
if(parameter1 === 2) {
/* ...unter gewissen Bedingungen (hier parameter1 === 2) aufgerufen wird... */
if(callback && typeof(callback) === 'function') {
callback();
}
}
}

aber schaffe es einfach nicht meine Funktion so zu bauen, dass:
- die Listenelemente einzeln einfaden
- und nach jedem Fade noch eine weitere Aktion ausgeführt wird, die sich je nach Art des Listenelements unterscheiden kann.

Wie müsste ich denn in:
PHP-Code:
$.fn.animate_single_li = function() { 
  $(
this).fadeIn('slow',function(){
    $(
this).addClass('white_check'); 
  });          

das hier:
PHP-Code:
 if(callback && typeof(callback) === 'function') {
     
callback();
 } 
einbauen?

Stehe komplett auf dem Schlauch - kann mich einer anheben?

P.S.:
Ein anderer Ansatz mit queue wäre:
PHP-Code:
$('#right_box ul li').each(function(i) {
    var 
lis = $(this);
    $(
document).queue('myQueue', function(n) {
      
lis.fadeIn('slow'n);
    });
});
$(
document).dequeue('myQueue');); 
aber das Problem wäre das gleiche - brauch statt dem FadeIn eine eigene Funktion mit callback, damit ich die Sequence entweder mit:
PHP-Code:
(function() {  
     $(
lis[i++] || []).animate_single_li(arguments.callee);  
  })(); 
oder mit:
PHP-Code:
$(document).queue('myQueue', function(n) {
      
lis.animate_single_li('slow'n);
}); 
aufrufen kann
__________________
"I don't want to belong to any club that would accept me as a member."

Groucho Marx

Geändert von mcmurphy (22-06-2012 um 13:28 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
jQuery submit() Callback TriphunEM HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 3 07-04-2010 21:14
jQuery append und callback! TriphunEM HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS 5 29-09-2009 15:04
Tabelle für Sequence BoFiaZ SQL / Datenbanken 8 14-01-2009 12:33
ob_start callback Lennie PHP Developer Forum 9 04-02-2008 19:49
PEAR::DB - Sequence php_rookie SQL / Datenbanken 7 29-07-2004 02:58

Themen-Optionen
Thema bewerten
Thema bewerten:

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 an


PHP News

Die RIGID-FLEX-Technologie
Die RIGID-FLEX-TechnologieDie sogenannte "Flexible Elektronik" , oftmals auch als "Flexible Schaltungen" bezeichnet, ist eine zeitgemäße Technologie zum Montieren von elektronischen Schaltungen.

06.12.2018 | Berni

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni


 

Aktuelle PHP Scripte

HeidiSQL - kostenloses MySQL front-end Editor für Windows ansehen HeidiSQL - kostenloses MySQL front-end Editor für Windows

HeidiSQL - ist ein Windows-Editor für die bekannt open Source Datenbank mySQL

10.12.2018 Berni | Kategorie: MYSQL/ Management
piwik Open-Source Webanalyse-Software ansehen piwik Open-Source Webanalyse-Software

piwik ist eine gute Alternative zu Google Analytics. Viele Features und ein modernes Erscheinungsbild mit aussagefähigen Statistiken in Echtzeit

10.12.2018 phpler | Kategorie: PHP/ Besucherzaehler
jQuery Mobile ansehen jQuery Mobile

Touch-Optimized Web Framework für Smartphones & Tablets

09.12.2018 phpler | Kategorie: AJAX/ Framework
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 11:54 Uhr.