簡單的jQuery，負載動畫不工作

我有一些圖像，我想動畫到100％不透明度，一旦頁面加載。簡單的jQuery，負載動畫不工作

我有這段代碼，但由於某種原因它不起作用。

CSS代碼是...

#photos img { 
    width: 100% !important; 
    height: auto !important; 
    margin: 5px 10px; 
    opacity: 0.2; 
    -webkit-transition: opacity 0.2s ease; 
    -moz-transition: opacity 0.2s ease; 
    transition: opacity 0.2s ease; 
} 
.loaded { 
    opacity: 1; 
}

jQuery代碼是...

$(function(){ 
    $('#photos img').on("load", function(){ 
     $(this).addClass("loaded"); 
    }); 
});

我這裏的jsfiddle ... http://jsfiddle.net/rzdzf/

我敢肯定，我很想念一些非常小的東西......？任何幫助，將不勝感激。

來源

2012-09-18 Adam

與圖像中使用，當你閱讀Load事件的**注意事項**在http://api.jquery.com /負載事件/？ – j08691

非常有趣，我會允許這種技術，謝謝指出。 – Adam

@Adam我不確定你是否正確閱讀了加載事件的警告。問題是，如果您希望每次訪問您的網頁都能正常工作，則不能依賴圖像「加載」事件。 – Jasper

試着做這樣的事情...

$('#photos img').animate({opacity: 1}, 1500);

或用於負載：

$('#photos img').on("load", function(){ 
    $(this).animate({opacity: 1}, 1500); 
});

來源

2012-09-18 20:29:32

釷完美的作品，謝謝你，但你怎麼看待這個，由j08691提出的一個好點 - 加載事件的警告，當與圖像在api.jquery .COM /負載事件？ – Adam

@Adam由於瀏覽器緩存，綁定到圖像'load'事件是非常棘手的，因爲誰知道圖像是否已經加載（在這種情況下，您的'load'事件處理程序不會觸發）。 – Jasper

這也是一個很好的方法。我試圖匹配你在做什麼，但我的第一個想法是使用$（窗口）。負載（函數（）{}）; –

如果它只是在這個小提琴中，這是因爲左側窗格中的設置表示運行代碼onLoad;但是那裏你有一個onLoad，但它已經加載了，所以它不能運行。將其更改爲nowrap。當我這樣做時，它按預期工作。

來源

2012-09-18 20:20:08 JKirchartz

沒有理由降低票，這實際上是真的，OP的JSFiddle是安裝不當。請親自看看：http://jsfiddle.net/rzdzf/（該設置位於視圖端口的左上角）。 – Jasper

是的..我同意賈斯珀在那一個... –

以此作爲你的腳本：

$(function(){ 
    $('#photos img').animate({opacity:1}); 
    });

來源

2012-09-18 20:31:57 Gogol

你能解釋一下你的方法嗎？ – Jasper

@ noc2spam這個工作，但它不會將加載時的動畫函數綁定到img。 – teewuane

@Jasper它應該在頁面加載時將不透明度從0.2增加到1。我使用OP發佈的小提琴，我的解決方案在小提琴中工作。我所看到的是，在這種情況下，你的答案是最好的（因爲你已經專門將窗口函數綁定到了窗口負載上。對於真實的項目，這將是答案）。每個人都應該upvote你的答案:) – Gogol

只需綁定到window.load事件，所有圖像將在該點加載。這對於綁定圖像load事件的問題很有幫助。因爲瀏覽器緩存，誰知道如果圖像已加載的（在這種情況下，你的Load事件處理程序不會閃光）

//run this in the global scope, the `window` object is always available 
$(window).on("load", function() { 
    $('#photos img').addClass("loaded"); 
});

這裏是一個演示：http://jsfiddle.net/rzdzf/10/

而且你.loaded類是不是被應用，因爲它比#photos img規則不太具體，所以才說得具體些：

#photos img.loaded { 
    opacity : 1; 
}

來源

2012-09-18 20:34:35 Jasper

簡單的jQuery，負載動畫不工作

回答

相關問題