如何在頁面加載淡入元素，而不是「出現」？

林jQuery的一個非常巨大的小白，我需要弄清楚如何改變這種代碼：如何在頁面加載淡入元素，而不是「出現」？

$('.social li').appear(); 
$(document.body).on('appear', '.social li', function(e, $affected) { 
    var fadeDelayAttr; 
    var fadeDelay; 
    $(this).each(function(){ 


     if ($(this).data("delay")) { 
      fadeDelayAttr = $(this).data("delay") 
      fadeDelay = fadeDelayAttr;    
     } else { 
      fadeDelay = 0; 
     }   
     $(this).delay(fadeDelay).queue(function(){ 
      $(this).addClass('animated').clearQueue(); 
     });   
    })   
});

中，由於有人進入登陸頁面，將盡快啓動動畫的方式工作，現在它適用於除了IE10和IE11什麼都好，被告知要更改默認情況下它不會對「出現」，但我試過文件準備/負載，我無法得到它的工作負荷...

來源

2014-06-27 user3782651

u能給予的jsfiddle – dev

http://jsfiddle.net/F9We7/這是的jsfiddle，希望這使得它更清楚 – user3782651

你可以嘗試褪色所有列表項眼簾，每一個progessing 250ms的延遲：

$(window).load(function() { 
    $('.social li').hide().each(function(i) { 
     $(this).delay((i + 1) * 250).fadeIn(2000); 
    }); 
});

EDIT：

使用相同的邏輯以前的代碼重構，使用由於在文件加載過程結束加載事件火災window.load方法。在這一點上，所有的文檔中的對象都在DOM，和所有的圖像和子幀等已完成加載。所以使用這個事件做衰落列表中的項目進入視野，他們的初始狀態將被隱藏的動畫。

你有兩個變量fadeDelayAttr和fadeDelay，但我注意到只有fadeDelay被使用，所以fadeDelayAttr可以被丟棄。此外，這部分代碼：

if ($(this).data("delay")) { 
     fadeDelayAttr = $(this).data("delay") 
     fadeDelay = fadeDelayAttr;    
    } else { 
     fadeDelay = 0; 
    }

可以簡化爲使用邏輯OR (||)的空合併運算符：

var fadeDelay = $(this).data("delay") || 0;

由於fadeDelay變量獲得從數據延遲屬性它的值，這可以被傳遞中作爲延遲方法的參數，最後重構的代碼看起來就像這樣：

$(window).load(function() { 
    $('.social li').hide().each(function() { 
     var fadeDelay = $(this).data("delay") || 0; 
     $(this).delay(fadeDelay).fadeIn(2000); 
    }); 
});

Working Demo

來源

2014-06-27 11:09:22 chridam

我很抱歉，我太小白要做到這一點，如何編輯我的腳本張貼或在哪裏添加你的，我應該刪除我的呢？ – user3782651

我編輯了包含必要重構的答案。 – chridam

如何在頁面加載淡入元素，而不是「出現」？

回答

相關問題