jQuery中的CSS屬性.load（）回調函數

我想用jQuery的方法獲取一些內容，然後使用CSS3過渡淡入，將不透明度從0更改爲1.不透明度已在0中設置爲0。 CSS以及轉換屬性。所以我應該做的就是在新內容加載後更改不透明度。jQuery中的CSS屬性.load（）回調函數

我認爲這將做到這一點：

function loadContent(url) { 
$('#panel-b').load(url + " #content", function() { 
    $('#content').css("opacity", 1); 
}); 
}

內容加載得很好，但它不褪色的不透明度會立即轉到1，沒有過渡效果。我認爲這可能是一個同步問題，所以我嘗試在setTimeout中包裝回調，並且實際上確實修復了它 - 但是爲什麼？即使超時設置爲0，它仍然有效。

奇怪的是，這也適用。什麼.show（）有.css（）不？

function loadContent(url) { 
$('#panel-b').load(url + " #content", function() { 
    $('#content').show().css("opacity", 1); 
}); 
}

我是否缺少一些基本的東西？任何有識之士將不勝感激。

注意：我知道使用jQuery的animate或fadeIn方法可以實現淡入效果，但這不是此處的目標。

來源

2014-01-19 Erik

您正在更改元素的CSS之前，它的呈現，所以用戶界面從來沒有看到初始不透明度，只要其有關的不透明度從未改變。
隨着setTimeout，即使你把時間放到0秒控制仍然回到用戶界面，然後執行預定功能。在這種情況下，會看到第一個不透明度，然後該更改觸發轉換。

來源

2014-02-10 00:01:05 Musa

使用jQuery animate方法

function loadContent(url) { 
    $('#panel-b').load(url + " #content", function() { 
     $('#content').animate({ 
      opacity : 1 
     },2000);//set duration in ms 
    }); 
}

，或者您可以使用fadeIn

function loadContent(url) { 
    $('#panel-b').load(url + " #content", function() { 
     $('#content').hide().fadeIn(2000);//set duration in ms 
    }); 
}

.css()只會CSS屬性應用到所選項目。

來源

2014-01-19 06:53:22

感謝您的回覆，但這並不能解釋爲什麼.css（）方法在我上面的示例中不起作用。 – Erik

jQuery中的CSS屬性.load（）回調函數

回答

相關問題