-1

理論的には、視覚効果を作成する3つのjavascript（jquery）関数があるとしましょう。最初の2つがレンダリングされた後に、そのうちの1つをレンダリングしたい場合、どうすればよいですか？

Javascript：

 <script type="text/javascript">

 $(function() {
 var transition = 'slow';
 var target1 = $('#somediv');
 var target2 = $('#second_div');
 var target3 = $('#third_div');
 target1.delay(5000).fadeIn();
 target2.delay(target2Time).fadeIn();
 target3.delay(target3Time).fadeIn();
 }); 
 </script>

 <script type="text/javascript">
 $.fn.teletype = function(opts){
 var $this = this,
    defaults = {
        animDelay: 50
    },
    settings = $.extend(defaults, opts);

 $.each(settings.text, function(i, letter){
    setTimeout(function(){
        $this.html($this.html() + letter);
    }, settings.animDelay * i);
 });
 };

 $(function(){
 $('#second_div').teletype({
    animDelay: 200,
    text: 'Hello, this is your classmate!'
 });
 });
</script>

HTML：

 <div id="somediv">Some Content</div>
 <div id="second_div"></div>
 <div id="third_div">Some third content</div>
4

3 に答える 3

4

このデモを作成しました。これは、1つのアニメーションを他の2つのアニメーションが終了するのを待つ方法を示しています。

var anim1 = $( '#elem1' ).animate({ width: 200 }, 3000 );
var anim2 = $( '#elem2' ).animate({ width: 200 }, 2000 );

$.when( anim1, anim2 ).done(function () {
   $( '#elem3' ).animate({ width: 200 }, 1000 );
});

ライブデモ： http： //jsfiddle.net/m67Ua/

フェージング要件にも同じ手法を適用できます。

var fade1 = $( '#img1' ).fadeIn( 3000 );
var fade2 = $( '#img2' ).fadeIn( 2000 );

$.when( fade1, fade2 ).done(function () {
   $( '#img3' ).fadeIn( 1000 );
});

ライブデモ： http： //jsfiddle.net/m67Ua/1/

于 2012-12-04T21:31:55.890 に答える
2

改善と同じように、一連のアニメーションを渡すことができます

 var array = new Array();
 array.push( $( '#img1' ).fadeIn( 3000 ));
 array.push( $( '#img2' ).fadeIn( 2000 ));

そして、トリックは、 applyメソッドを使用して、jqueryで期待されるように配列からリスト引数に変更することです。

$.when.apply(this, array ).done(function () {
    $( '#img3' ).fadeIn( 1000 );
});

ライブデモ：

http://jsfiddle.net/m67Ua/2/

于 2013-02-19T20:36:18.163 に答える
0

私はコールバックと完了が必要だったので、これをチェックしてください：

$.when(
    $('#container .item')
        .animate({"opacity": "0"}, 1000, 
            function onCallbackForEach () {
                console.log('callback on element called');
            })
).done( function onFinally () {
    console.log('done called');
});

これにより、アニメーションの後に要素を処理するためのアクセスが可能になり（たとえば、古い要素をそれらに置き換える）、さらに、すべてのアニメーションが終了した後に作業を行うための単一のコールバックがあります...

于 2015-06-23T11:42:26.810 に答える