Блог

Главная - Вопросы по программированию - Jquery fadeIn(), на который влияет переход CSS

Jquery fadeIn(), на который влияет переход CSS

#jquery #css #transition #fadein

#jquery #css #переход #fadein

Вопрос:

у меня проблема, когда я вызываю затухание при загрузке веб-сайта, но из-за эффекта перехода 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;
}

Комментарии:

1. Я не вижу никаких transition свойств в вашем css?

2. @Al.G. Transition не работает display .

3. прошу прощения, он был там, но когда я удалил его, он работал так, как должен, я добавлю его снова сейчас

4. мне нужно, чтобы он был там, но он не работает должным образом, когда он

5. Если это не работает, почему вы используете transition ? Для чего вам это нужно?

Ответ №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;

}

Метки: ,