受 CSS 过渡影响的 Jquery fadeIn()

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;