幻燈片關閉屏幕，而不是褪色

我一直試圖讓這個工作，但我找不到解決方案。幻燈片關閉屏幕，而不是褪色

目前我Divs從屏幕的頂部滑動，然後淡出。而不是淡出，我想Div從屏幕上向下滑動。

var elements = ['#pointsbarDiv', '#hotlink1Div','#pointsbarDiv', '#hotlink2Div']; 

function anim_loop(index) { 
    $(elements[index]).slideDown(1000, function() { 
     var $self = $(this); 
     setTimeout(function() { 
      $self.fadeOut(1000); 
      anim_loop((index + 1) % elements.length); 
     }, 5000); 
    }); 
} 

anim_loop(0); // start with the first element**strong text**

預先感謝任何幫助。

來源

2013-12-03 Raggy

很好，它不會在所有你正在做的是逐漸把它隱沒滑動關閉屏幕。* 「我有這個綠色的div，我怎麼讓它變成黃色？」* –

我想將動畫從淡入淡出變爲幻燈片。正如Jwags在下面回答我的。但是，現在我的問題是我想讓他的動畫代替我的代碼中的slideDown。 – Raggy

我的觀點一般是在stackoverflow，你必須嘗試自己解決問題。然後，我們會幫助您解決在執行任何問題時遇到的問題。我們不是在這裏爲你做的，只是簡單地說「use .animate」不是很有用。 –

您只需將調用的fadeOut呼叫交換爲.animate()即可。下面是一個例子位置頂值設置爲屏幕高度低於

function anim_loop(index) { 
    $(elements[index]).css({top: 0, display: 'none'}).slideDown(1000, function() { 
    var $self = $(this); 
    setTimeout(function() { 
     $self.animate({top: $(window).height() + 100}, 1000); 
     anim_loop((index + 1) % elements.length); 
    }, 2000); 
    }); 
} 

anim_loop(0); // start with the first element

demo

來源

2013-12-03 19:14:55 jwags

謝謝，那就是我一直在尋找的。只是想知道...我怎麼能實現動畫來取代slideDown？ – Raggy

我建議閱讀我在答案中提供的jQuery animate文檔的鏈接。這是學習關於移動DOM的不同選項的好資源。 – jwags

幻燈片關閉屏幕，而不是褪色

回答

相關問題