Jquery fadeIn() betroffen von CSS Übergang

Question

Ich habe ein Problem, wo ich eine Einblendung aufrufen, wenn die Website lädt, aber aufgrund der CSS-Übergangseffekt das Element geht zur vollen Deckkraft sofort verblasst dann verblasst wieder, ich versuche zu finden um dies ein Weg, wie es sieht schlecht aus

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

Ich habe eine jsFiddle mit Ihrem Code erstellt und ein paar Änderungen vorgenommen, so dass die Fade unter Last funktioniert.

Das css transition: all .5s war der Übergang, den Sie versuchten, mit Javascript zu tun. Sie haben auch eine unnötige Klasse benutzt, aber wenn Sie sie wirklich wollen, können Sie sie wieder hinzufügen.

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; 

}