JQuery fadeIn(), связанный с переходом CSS

Question

У меня проблема с тем, что я вызываю затухание при загрузке сайта, но из-за эффекта перехода css элемент переходит в полную непрозрачность, мгновенно исчезает, затем исчезает, im пытается найти способ обойти это, как это выглядит плохо

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; 
} 

Answer 1

Я создал jsFiddle с вашим кодом и сделал несколько изменений так, чтобы затухание работало при загрузке.

css transition: all .5s отбрасывал переход, который вы пытались сделать с помощью Javascript. Вы также использовали ненужный класс, но если вы действительно этого хотите, вы можете добавить его обратно.

HTML

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

JS

$(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; 

}