jquery fadeIn（）CSSトランジションの影響を受けます

Question

ウェブサイトが読み込まれたときにフェードインするという問題がありますが、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; 
} 

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; 

}