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>

目标 如果您将鼠标悬停在推子/滑块下方的导航上，您将看到我的动画无法正常工作。他们跳来跳去。当我将鼠标悬停在汽车/家庭/企业或生活上或它们过渡时，我希望动画能够制作动画。

截至目前，它无法正常工作。有什么建议么？

4

1 回答 1

1

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

jsFiddle 演示

我试图在评论中传达的是你希望你的位置开始是隐藏的（无论需要多少顶部/底部 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');
});​
于 2012-09-06T18:01:07.223 回答