JQuery animasyonu arasında bir işlev isteme

Merhaba, katmanlı bir görüntü efekti oluşturmaya çalışıyorum ama jQuery animasyonuyla birlikte bir işlevi kuyruğa almada sorun yaşıyorum.

Temel olarak .bar div'larımın tümünü gizlemeliyim, sonra da fonksiyonu çalıştırdıktan sonra, onları bir seferde solacak. Bu şekilde birden fazla resim olacak ve bu etki aralarındaki geçişi yaratacak şekilde yapmalıyım.

<div class="container">
<div class="image">
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
    <div class="bar">
    </div>
</div>

and the CSS is like this

.container {width:700px;height:400px;margin:0 auto;background:#FF0;}
.image {background:green; width:700px; height:300px; }
.bar { height:300px; width:50px; background:orange; float:left;}

and the javascript/jquery is like this

$(function(){

var i = -1;

function fading(){
    function fader(){
    setTimeout(function() {          
          i++;                    
          if (i < 15) {          
             $('.bar:eq(' + i + ')').fadeIn('200');
             fader();           
          }                       
       }, 100)
    }
    fader()
}

$('input').click(function(){

    $('.bar').hide().queue(function(){
                    fading()
                    $('this').dequeue();
                    });
});


});

If anyone has ideas on how this can be done differently or achieved in the way I have laydd out that would be great

0

1 cevap

Animasyon kuyruğunu bu şekilde kullanamazsınız, çünkü .queue çağrınız, tüm fadeIn() çağrılarıyla karıştırılır ve aşağıdakiler kadar beklemez. animasyon kuyruğunu da kullanıyorlar. Ayrı bir kuyruk oluşturabilir ve bunu kullanabilirsiniz, ama muhtemelen buna değmez.

Neden fader() işlevi neden 15 katmanla tamamlandığında sonraki işleminizi tetiklemiyor?

Ya da, 15 katmanla tamamlandığında arayabileceğiniz fader() 'a bir geri arama işlevi iletebilirsiniz.

Yapmaya çalıştığınız şeyi tam olarak anlayamadım, ancak 15 katmanda solmaya gittiğinizde ( else 'e eklediğime bakın) burada başka bir işlevi başlatabilirsiniz:

function fading() {
    var cntr = -1;
    function fader() {
       setTimeout(function() {          
          cntr++;
          if (cntr < 15) {          
             $('.bar:eq(' + cntr + ')').fadeIn('200');
             fader();           
          } else {
            //done fading in the 15 items, now you can call some other function
            //here to start the next operation
             afterFade();
          }
       }, 100);
    }
    fader();
}

Tıklama kodunuzu şu şekilde basitleştirmeyi deneyin:

$('input').click(function(){
    $('.bar').hide();
    fading();
});

.hide() is synchronous (it doesn't use the animation queue) so you can just call fading() right after it.

Ayrıca, ikinci çağrıda cntr değişkeninizi fading() olarak yeniden başlatmanız gerekir. Yukarıdaki kod örneğimde, değişkenin adını i yerine cntr olarak değiştirdim ve tanımını ve ilklendirmesini fading() fonksiyonu böylece her bir sonraki aramada otomatik olarak başlatılır.

0
katma
fader() işlevindeki sonraki eylemi nasıl sıraya koyarım?
katma yazar Psylant, kaynak
Tamam evet çalışıyor ama ben tekrar işlevini çalıştırmak için tıklattığınızda sorun değil. Diğer bir deyişle, ilk tıklatma yapamayan herhangi bir tıklamaya çalışır. Teşekkürler, yardımlarınız için, maalesef tam olarak neyi başarmaya çalıştığımı açıklamakta zorlanıyorum.
katma yazar Psylant, kaynak
Bunu yapmanın bir yolu, cevabımda eklediğim kod örneğidir.
katma yazar jfriend00, kaynak
Daha sonraki tıklamalar için çalışmamı sağlamak için yanıtımı daha ekledim. FYI, Muhtemelen animasyonla meşgulken bir tıklamaya karşı korunmanız gerekir.
katma yazar jfriend00, kaynak