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;

}

受CSS转换影响的Jquery fadeIn（）

1 个答案: