Question

我正在研究project

我想在推子/滑块中排列动画。

<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]]

目标如果将鼠标悬停在推子/滑块下的导航上，您将看到我的动画无法正常工作。他们跳来跳去。当我将鼠标悬停在自动/家庭/商业或生活或转换时，我希望动画能够生成动画。

截至目前，它无法正常运作。 有任何建议吗？

Answer 1

我认为你正在尝试做这样的事情：

jsFiddle DEMO

我在评论中试图传达的是，您希望您的职位开始为隐藏（无论上/下px金额是多少）。然后，你动画然后进入正确的位置。

超级基本的例子，但你明白了这个想法。它们最初是从视图中隐藏起来的，然后它们一次出现一个。

#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');
});

如何使用jQuery Cycle Plugin正确排队动画/过渡

1 个答案: