Jquery fadeIn（）受CSS過渡影響

即時通訊有一個問題，我在網站加載時調用淡入淡出，但由於css過渡效果元素去完全不透明立即淡出然後淡入，即時通訊嘗試找到解決的辦法，因爲它看起來壞Jquery fadeIn（）受CSS過渡影響

jQuery的

$(window).on("load", function() { 
    setTimeout(function() { 
    $('#contactbutton').fadeIn(2000); 
}, 4000);

HTML

<div class="contactbutton" style="display:none;" id="contactbutton">CONTACT</div>

CSS

.contactbutton { 
    position:absolute; 
    top:10px; 
    right:10px; 
    height:35px; 
    text-align:center; 
    font-size:12px; 
    border-radius:25px; 
    width:160px; 
    color:#e97861; 
    background:#FFFFFF; 
    line-height:37px; 
    border:1px solid #fff; 
    cursor:pointer; 
    z-index:9999; 
    transition: all .5s; 
}

來源

2016-10-16 Ray

我沒有看到你的CSS任何'transition'財產？ –

@ Al.G。轉換不適用於'display'。 –

道歉，它在那裏，但是當我刪除它的工作，因爲它應該生病再次添加它現在 – Ray

我用你的代碼創建了一個jsFiddle，並做了一些編輯，以便淡入淡出。

css transition: all .5s正在拋棄您嘗試使用Javascript進行的轉換。您也在使用不必要的課程，但如果您確實需要它，則可以將其添加回來。

HTML

<div id="contactbutton">CONTACT</div>

$(document).ready(function() { 
    $('#contactbutton').fadeIn(2000); 
})

CSS

#contactbutton { 
    background: #FFFFFF; 
    border: 1px solid #fff; 
    border-radius: 25px; 
    color: #e97861; 
    cursor: pointer; 
    display: none; 
    font-size: 12px; 
    height: 35px; 
    line-height: 37px; 
    position: absolute; 
    right: 10px; 
    text-align: center; 
    top: 10px; 
    width: 160px;

}

來源

2016-10-17 00:52:00

Jquery fadeIn（）受CSS過渡影響

回答

相關問題