JQuery wiederholung nicht auf Zeit

[Freuler]

Guten Tag wohl.

Ich suche seit Stunden nach einer Syntax die mein jQuery Code ohne Zeitangabe (einfach nach Beendigung) wiederholt. Jedoch wurde ich nicht fündig. Kann mir da jemand aushelfen?

Vielen Dank für die Hilfe :)

 

[struppi]

Kannst du deine Frage auch konkreter formulieren?

 

[Freuler]

Entschuldige. Ich versuchs mal.

Ich möchte dass sich mein Code

    $('#s1').hide();
    $('#s3').animate({opacity: 1.0}, 3000).fadeOut('slow', function() {
    $('#s1').animate(3000).fadeIn('slow', function() {
    $('#s1').animate({opacity: 1.0}, 3000).fadeOut('slow', function() {
    $('#s3').animate(3000).fadeIn('slow')});});});

bei Beendigung wiederholt. :S Ist das irgendwie, ohne Zeitangabe eine Setintervals oder Ähnlichem möglich?

 

[struppi]

Da das asynchrone Funktionen sind (die intern alle mit setTiemout oder setInterval arbeiten), musst du hier die entsprechenden Events benutzen. Bei der Funktion animate, ist es z.b. der 4. Parameter, wo die Callbackfunktion für diesen Event übergeben wird .animate() – jQuery API - für die anderen Funktionen musst du dir das selber raussuchen. Dann musst du diese Events irgendwie zusammenfassen, z.b. indem du sie zählst und dann entsprechend wieder von vorne anfangen.

 

[Freuler]

Mmhh. Ich raffs einfach nicht, auf diese Lösung kam ich bereits, aber es funktioniert nicht wie ich will. Ich weiss nicht welche Option ich da einfügen muss, um diesen Effekt der wiederholung anzuhängen

 

[struppi]

Option? Parameter! Du benutzt ja schon den Callback, insofern weiß ich jetzt nicht was das Problem ist. Du musst nur das Gleiche machen, wie du schon in deinem Code bereits vorhanden. Das Problem ist dieser extrem verschachtelte Ablauf.

hmmm, ich hab mir den Code noch mal genauer angeschaut. Mir ist nicht klar was du, warum machst. Hier passieren die gleichen Dinge mit unterschiedlichen Funktionen (show()/hide() und animate( {opacity:x}) dürften in etwa das selbe machen), z.T. mehrmals hintereinader. Soll das ein blinken werden?

 

[Freuler]

Ja genau, das sollte es. Das ich zum Beispiel Text in verschiedener Sprache anzeige kann, dass selbst automatisch wechselt.

 

[Freuler]

Hmmm ich bin ununterbrochen am Suchen, ich werde einfach nicht fündig. Habe bereits das neue Adobe Edge heruntergeladen. Funktioniert ebenfalls super, aber auch nicht endlos. Die Aktionen werden einmal ausgeführt. Danach steht alles still.

Das kann doch wohl nicht so schwierig sein. Das ist doch keine grosse Sache, und ich verbringe Ewigkeiten daran.

Noch eine Idee, die ich verstehen kann, oder ein Beispiel? Danke schön :)

 

[struppi]

Naja, schwierig ist realtiv, ich weiß nach wie vor nichts, was du mit den verschiedenen Funktionen erreichen willst. Aber für die animate Funktion hab ich dir mal ein Beispiel gebaut:

<div onclick="blink()" id="test">Animate</div>
<script type="text/javascript">

function blink() {
    var opacity = 0;
    var animate = function() {
        $('#test').animate({opacity: opacity}, 1500, function() {
            opacity = opacity ? 0 : 1;
            animate();
        });
    };
    animate();
    
}
</script>

Allerdings sieht das nicht schön aus, weil solche Effekte noch einen ease Faktor haben sollten.

 

[Freuler]

Achsoh. Okay. Habe den Script ausprobiert, und mich darin versucht. Das Problem bleibt nach wie vor.

Ich möchte sowas in jQuery erreichen: http://images.apple.com/ch/home/images/choose_language_05.gif

Vielen Dank für deine Hilfe :)

 

[struppi]

Ich bin nicht so der jQuery Experte, was mich aber dazu veranlasst hat, deine Idee mal auszuprobieren, ich würd's so in der Art machen

<div onclick="blink()" id="test"><span>deutsch</span><span>english</span></div>
<script type="text/javascript">
function blink() {
    var o1 = $('#test span').first();
    var o2 = $('#test span').next();
    o2.hide();
    $('#test span').css('position', 'absolute');
    var animate = function() {
        var c = 0;
        o1.fadeOut(1500, function() {ready(++c);});
        o2.fadeIn(1500,  function() {ready(++c);});
    };
    var ready = function(a) {
        if(a === 2){
            var tmp = o1;
            o1 = o2;
            o2 = tmp;
            animate();
        }
    }
    animate();
    
}
</script>

 

[Freuler]

Super! Das ist die Lösung. Danke dir tausendmal :)