0

私はこのプロジェクトに取り組んでいます

フェーダー/スライダーでアニメーションをキューに入れたいです。

<script>
$(function() {
  // Hover Switch
   function fnFadeHover(){$('#feature_fadeSlideshow').cycle($('#feature_fadeBtns li').index($(this).parent()));}
   function fnFadeOut(){}
   $('#feature_fadeSlideshow').cycle({
     //fx:'fade',
     timeout:9000,
     delay:5000,
     pause:true,
     after:onAfter,
     before: function(currSlideElement, nextSlideElement, options, afterCallBack, forwardFlag){
       console.log('before');
       var slide_index = $('#feature_fadeSlideshow .panel').index(nextSlideElement);
       $('#feature_fadeBtns li').removeClass('activePager').eq(slide_index).addClass('activePager');    

        $('#auto-automobile').animate({"top": "75px","left": "-2000px"}, "slow",  function(){
           $('#auto-sun').animate({"top": "-300px"}, "slow", function(){
             $('#auto-cloud').animate({"top": "20px", "right":"300px"}, "slow", function(){
               $('#auto-smallCloud').animate({"top": "10px"}, "slow")})

         $('#home-house').animate({"top": "-300px", "left": "310px"}, "slow", function(){
           $('#home-tree').animate({"bottom":"-400px"}, "slow", function(){
             $('#home-smallCloud').animate({"top": "20px"}, "slow")})
           }); 

          $('#business-highway').animate({"top": "-200px"}, "slow", function(){
           $('#business-buildings').animate({"bottom": "-400px"}, "slow", function(){
             $('#business-cloud').animate({"top": "20px"}, "slow")})
           });       

          $('#life-object').animate({"top": "150px"}, "slow", function(){
           $('#life-flowers').animate({"top": "131px"}, "slow", function(){
             $('#life-scope').animate({"top": "284px"}, "slow")})
           });

          });
         });       
     }});
   $('#feature_fadeBtns li a').hoverIntent(fnFadeHover,300,fnFadeOut);
});  
      function onAfter() { 
           $('#auto-automobile').animate({"top": "75px","left": "260px"}, "slow", function(){
               $('#auto-sun').animate({"top": "0px", "right":"400px"}, "slow", function(){
                 $('#auto-cloud').animate({"top": "20px"}, "slow", function(){
                   $('#auto-smallCloud').animate({"top": "20px", "left": "415px"}, "slow")})

         $('#home-house').animate({"top": "105px", "left": "310px"}, "slow", function(){
           $('#home-tree').animate({"top": "90px"}, "slow", function(){
             $('#home-smallCloud').animate({"top": "25px", "right":"5px"}, "slow")})
           }); 

          $('#business-highway').animate({"top": "200px"}, "slow", function(){
           $('#business-buildings').animate({"bottom": "60px"}, "slow", function(){
             $('#business-cloud').animate({"top": "30px"}, "slow")})
           });   


          $('#life-object').animate({"top": "150px"}, "slow", function(){
           $('#life-flowers').animate({"top": "131px"}, "slow", function(){
             $('#life-scope').animate({"top": "284px"}, "slow")})
           });
        });
      }); 
}
</script>
[[Content]]

</p>

目標 フェーダー/スライダーの下のナビゲーションにカーソルを合わせると、アニメーションが正しく機能していないことがわかります。彼らは飛び回ります。auto/home/business または life にカーソルを合わせたとき、またはそれらが遷移したときに、アニメーションをアニメーション化したいと考えています。

現在のところ、正常に動作していません。助言がありますか？

4

1 に答える 1

1

私はあなたがこのようなことをしようとしていると思います：

jsFiddleデモ

私がコメントで伝えようとしていたのは、位置を非表示として開始することです（これを行うために必要な上下のピクセル数に関係なく）。次に、正しい位置にアニメートします。

超基本的な例ですが、ここでアイデアが得られます。それらは元々、視界から隠された状態で始まり、その後、一度に1つずつ表示されます。

#one { position:absolute; top:-500px; }
#two { position:absolute; bottom:-500px; }​

$('#one').animate({ left: '50px', top: '0px' }, 'slow', function () {
    $('#two').animate({ left: '200px', bottom: '200px' }, 'slow');
});​
于 2012-09-06T18:01:07.223 に答える