如何正確隊列使用jQuery Cycle插件

動畫/轉換我工作的這個project 如何正確隊列使用jQuery Cycle插件

我想我的排隊中的動畫推子/滑塊。

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

目標如果推子/滑塊下將鼠標懸停在導航，你會看到我的動畫不能正常工作。他們跳來跳去。當我將鼠標懸停在汽車/家庭/商業或生活上或者他們轉換時，我想讓動畫製作動畫。

截至目前，它不能正常工作。 有什麼建議嗎？

來源

2012-09-06 breezy

它看起來像在工作，而不是你想要的方式？問題 –

當你將鼠標懸停在家中時會顯示房子。假設發生的事情是，當我徘徊在家中時，房屋倒塌，樹木升起。但是因爲所有我的動畫都是在DOM加載後發生的，所以它不能按我想要的方式工作。與商業同樣的事情。生活還沒有建立起來。 @mcpDESIGNS – breezy

我覺得在這樣的情況下，這些項目應該隱藏起來，然後他們動畫到正確的位置。當你去看其他動畫時，確保前一個回到它的隱藏位置。如果我正確理解你.. –

我認爲你正在嘗試做這樣的事情：

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

來源

2012-09-06 18:01:07

是的，這是我想要做的，但我想因爲我使用循環插件它不能正常工作。如果你訪問http://parker.astonishlive.com/，你會看到如果你在家中懸停，你會看到我在說什麼。房子出現然後隱藏然後再次出現。 – breezy

有沒有辦法讓我排隊呢？我正在使用循環插件的'before'和'after'屬性。 – breezy

我認爲這不是問題的原因，就像房子原來的位置一樣。似乎它開始在那裏的中心。你能證實嗎？ –

如何正確隊列使用jQuery Cycle插件

回答

相關問題