JQuery Textanimation Verzögerungsfunktion nicht funktioniert

Question

Ich habe diesen Text folgende Jquery fly-in animation.Here mein Code, bevor ich weiter erklären:

<script type="text/javascript"> 

$(document).ready(function(){ 

    $('.flying1 .flying-text').css({opacity:0}); 
    $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text 
    var int = setInterval(changeText, 3500); // call changeText function every 5 seconds 

function changeText(){ 
    var $activeText = $(".flying1 .active-text");  //get current text  
    var $nextText = $activeText.next(); //get next text 

    if ($activeText.is('.end')) { 
     $activeText.stop().delay(5000); 
     $('.flying1').html('<div class="flying-text active-text">Text4<div> 
           <div class="flying-text">Text5</div> 
           <div class="flying-text end2">Text6</div>'); 
     $('.flying1 .flying-text').css({opacity:0}); 
     $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text 
    }; 

    if ($activeText.is('.end2')) { 
     $activeText.stop().delay(5000); 
     $('.flying1').html('<div class="flying-text active-text">Text1<div> 
           <div class="flying-text">Text2</div> 
           <div class="flying-text end">Text3</div>'); 
     $('.flying1 .flying-text').css({opacity:0}); 
     $('.flying1 .active-text').animate({opacity:1, marginLeft: "0px"}, 1200); //animate first text 
    }; 

    $nextText.css({opacity: 0}).addClass('active-text').animate({opacity:1, marginLeft: "0px"}, 1200, function(){ 

     $activeText.removeClass('active-text');           
    }); 
} 
}); 
</script> 

HTML

<div class="flying-text active-text">Text1<div> 
<div class="flying-text">Text2</div> 
<div class="flying-text end">Text3</div> 

Nun, wie Sie sehen können, , Text1-3 animiert/fliegt zuerst ein, dann, wenn Text3 erreicht ist, werden sie durch Text4-6 in der Animation ersetzt, wenn Text6 wieder erreicht wird, springt es wieder zu Text1-3 ... Nun, im Grunde, was ich will Wenn Sie das Ende des Texts erreichen, wird die Animation für einen längeren Zeitraum angehalten/verzögert, also in Text3 (class = "fliegende Text Ende") ") und Text6 (class =" fliegender Text end2 "). Ich möchte Text3 und Text6 länger animieren als alle anderen. wie mache ich das? Der Code, den ich verwendet:

$activeText.stop().delay(5000); 

nicht ...

Sie funktioniert Vielen

Answer 1

Ich glaube, Sie Dinge zu kompliziert für sich selbst gemacht haben.

Sie müssen nur normale setTimeout verwenden, um die nächste Animation auszulösen, aber tun Sie das innerhalb der Animation "complete" -Funktion, um sicherzustellen, dass Sie Animationstimer nicht mit normalen Timern mischen.

Sie sollten auch setInterval aus dem gleichen Grund vermeiden - es wird nicht mit Animationszeitgebern synchron sein, insbesondere wenn die jQuery-Autoren wieder auf zurückgreifen.

Hier ist meine Lösung:

var text = [ 
    ['Text1', 'Text2', 'Text3'], 
    ['Text4', 'Text5', 'Text6'] 
    ]; 

var n = 0, 
    page = 0; 
var $f = $('.flying-text'); 

function changeText() { 
    $f.eq(n).text(text[page][n]).css({ 
     opacity: 0, 
     marginLeft: '-50px' 
    }).animate({ 
     opacity: 1, 
     marginLeft: "0px" 
    }, 1200, function() { 
     if (++n === 3) { 
      page = 1 - page; 
      n = 0; 
      setTimeout(function() { 
       $f.empty(); 
       changeText(); 
      }, 6000); 
     } else { 
      setTimeout(changeText, 2000); 
     } 
    }); 
}; 

changeText();​ 

Arbeits Demo auf http://jsfiddle.net/alnitak/GE2gN/

Beachten Sie, dass diese vollständig den Textinhalt aus der Animation Logik trennt.

Answer 2

Es gibt eine ähnliche Frage hier:

delay JQuery effects

In den Kommentaren der zweiten antwort es sagt, dass Verzögerung nicht mit Stop funktioniert.

Ich hoffe, diese Seite ist nützlich für Sie.

EDIT OK, ich habe eine Lösung gefunden. Probieren Sie das aus und lassen Sie mich wissen, ob es geeignet ist.

Ersetzen Sie Ihre Verzögerungsleitungen mit diesem:

$(this).animate('pause').delay(5000).animate('resume'); 

Answer 3

Queue Ihre Animationen und verwenden .delay() auf eine gemeinsame Warteschlange Objekt (demo):

var text = [ 
     [ 'Text1', 'Text2', 'Text3' ], 
     [ 'Text4', 'Text5', 'Text6' ] 
    ], 
    reset = { 
     opacity: 0, 
     marginLeft: -50 
    }, 
    flyout = { 
     opacity: 1, 
     marginLeft: 0 
    }, 
    flyoutDuration = 1200, 
    changeTextDelay = 5000, 
    q = $({}), // can also be a common element, e.g. $('.flying1') 
    pos = 0; 

function changeText() { 
    $('.flying1 .flying-text').each(function(i) { 
     var div = $(this); 

     // setup text 
     div.css(reset).text(text[pos][i]); 

     // queue 
     q.queue(function(next) { 
      div.animate(flyout, flyoutDuration, next); 
     }); 
    }); 

    q.delay(changeTextDelay).queue(function(next) { 
     pos = (pos + 1) % text.length; 
     changeText(); 
     next(); 
    }); 
} 

changeText();