Чарзе функцыі сярод JQuery анімацыі

Прывітанне Я спрабую стварыць шматузроўневы эфект малюнка, але ў мяне ўзніклі праблемы з чэргамі функцыі разам з jQuery анімацыяй.

У прынцыпе мне трэба, каб схаваць усе мае .bar дзівы затым выканаць функцыю, пасля чаго зробіць іх FadeIn адзін на адзін раз. Мне трэба зрабіць гэта такім чынам, як будзе некалькі малюнкаў, і гэты эфект будзе тое, што стварае пераход паміж імі.

<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 адказы

Вы не можаце выкарыстоўваць чарзе анімацыі такім чынам, таму што ваш .queue выклік становіцца ўперамешку з усё FadeIn() Выклікі і не будзе чакаць, пакуль іх як яны выкарыстоўваюць чаргу анімацыі таксама. Можна было б стварыць нейкую асобную чаргу і выкарыстоўваць, але гэта, верагодна, не варта.

Чаму проста не маюць фейдера() функцыя запуску вашага наступнага дзеянні, калі ён заканчвае з 15 пластамі?

Ці, вы можаце перадаць функцыю зваротнага выкліку ў фейдера() , які можна назваць, калі гэта зроблена з 15 пластамі?

Я не разумею, што менавіта вы спрабуеце зрабіць, але вы можаце пачаць іншую функцыю тут, калі вы скончыце замірання ў 15 слаёў (гл дзе я дадаў яшчэ ):

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();
}

Паспрабуйце спрасціць код пстрычкі на гэта:

$('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.

Вы таксама павінны реинициализировать CNTR зменную на другім выкліку выцвітання() . У маім прыкладзе кода вышэй, я змяніў імя зменнай ад я у CNTR і перамешчаны гэтую забарону і ініцыялізацыя ў верхняй частцы выцвітання() функцыя таму аўтаматычна ініцыялізуюцца на кожным наступным выкліку.

0
дададзена
Як бы я чарга наступнае дзеянне ў фейдера) <�код /> функцыі (?
дададзена аўтар Psylant, крыніца
ок ды што працуе нармальна, але праблема ў тым, калі я націскаю запусціць функцыю зноў не выконвае. Іншымі словамі, першы пстрычка працуе любой пстрычка пасля гэтага не робіць. Дзякуй, за вашу дапамогу, шкада яго цяжка растлумачыць, што менавіта я спрабую выканаць над тэкстам.
дададзена аўтар Psylant, крыніца
Адзін са спосабаў зрабіць гэта ў кодзе прыкладу я дадаў да майго адказу.
дададзена аўтар jfriend00, крыніца
Я дадаў яшчэ да майго адказу, каб прымусіць яго працаваць на наступных кліках. FYI, вы, верагодна, неабходна для абароны ад пстрычкі, пакуль ён заняты анімацыі.
дададзена аўтар jfriend00, крыніца