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过渡影响

回答

相关问题