A組分與jQuery

Question

是淡入（）對於此組件改變其位置

<span id="uplodIsOk" class="notextoverflow" style="position: absolute; top:585px; width:40px left: 305px; z-index:1000; font-size:11px;font-weight: bold; display:inline-block; vertical-align:middle; margin-bottom:7px; color:#3bb3e0;display: none;" >La photo est charg&#233;e avec succ&#233;s ! </span> 

我申請這個jQuery：

$("#uplodIsOk").fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200).fadeOut(200).fadeIn(200); 

並在最後的淡入情況，請從left: 305px;股利移到差不多left:0px;

和在瀏覽器控制檯中我發現left屬性從組件樣式中刪除 （還有width）：

<span id="uplodIsOk" class="notextoverflow" style="position: absolute; top: 405px; z-index: 1000; font-size: 11px; font-weight: bold; display: block; vertical-align: middle; margin-bottom: 7px; color: rgb(59, 179, 224);">La photo est chargée avec succés ! </span> 

分量應該保持它的位置，所以它爲什麼改變了？爲什麼左邊的屬性在淡入之後消失？

Answer 1

jQuery淡入淡出動畫有已知問題w/r/t定位;基本上，默認的完整代碼將與內聯樣式混淆。這是不使用內聯樣式的另一個原因;如果樣式特定於此元素，則應在鏈接的CSS文件中通過ID更改它。以下內容添加到您的CSS和HTML文件，你應該是金：

新的HTML：

<span id="uplodIsOk" class="notextoverflow">La photo est charg&#233;e avec succ&#233;s ! </span> 

新的CSS：

#uplodIsOk { 
    position: absolute; 
    top:585px; 
    width:40px 
    left: 305px; 
    z-index:50; 
    font-size:11px; 
    font-weight: bold; 
    display:inline-block; 
    vertical-align:middle; 
    margin-bottom:7px; 
    color:#3bb3e0; 
    display: none; 
} 

，或者，如果你沒有一個鏈接CSS文件，你可以將CSS包裝在樣式標籤中，並將其粘貼到標題中，如下所示：

<style> 
#uplodIsOk { 
    position: absolute; 
    top:585px; 
    width:40px 
    left: 305px; 
    z-index:50; 
    font-size:11px; 
    font-weight: bold; 
    display:inline-block; 
    vertical-align:middle; 
    margin-bottom:7px; 
    color:#3bb3e0; 
    display: none; 
} 
</style>