0

ユーザーが特定のポイントまでスクロールできるようにする方法はありますか、要素がフェードインし、その後アニメーション (X2) が再生され (ユーザー入力なし)、その後スクロールによってさらにアニメーションがトリガーされますが、アニメーションが(X2) は最後までプレイしました。

var controller = $.superscrollorama({
            triggerAtCenter: false
        });
            // set duration, in pixels scrolled, for pinned element
                var pinDur = 2800;

                // create animation timeline for pinned element
                var pinAnimations = new TimelineLite();
                pinAnimations
                    .append([
                        TweenMax.to($('#mouse_walk'), 5, {css:{opacity: 1},
                            onComplete: function(){
                                $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                    $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                        $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                            $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                setTimeout(function() {
                                                      $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '977px', width: '1080px', left: '49.5%', top:'370px'}, 200, function(){
                                                          $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                              $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '995px', width: '1100px', left: '49.3%', top:'360px'}, 200, function(){
                                                                  $( "#mouse_walk, #mouse_walk img" ).stop().animate( {height: '944px', width: '1044px', left: '50%', top:'380px'}, 200, function(){
                                                                    })
                                                                })
                                                            })
                                                        })
                                                    }, 800);
                                                    })
                                                })
                                            })
                                        });
                                    }
                                }
                            )
                        ])
                    .append([
                        TweenMax.to( $('#mouse_walk_hell'), 5, {css:{opacity: '1'}})
                    ])
4

1 に答える 1

0

これは本当に複雑すぎるようです。

これに関する私の思考プロセスは、最初のアニメーションを行うピンを持っています。

そのアニメーションの onComplete に、発生させたいトゥイーンを直接追加しますか?

onComplete メソッド内に別の timelineLight をネストできるため、JQuery アニメーションの巨大なネストされたグループを持たなくても、これらのアニメーションをシーケンスできます。

また、greensock と JQuery アニメーションを一緒に使用しないことを強くお勧めします。これらは私にとって悪夢の原因です。

于 2013-10-15T17:22:26.593 に答える