Объедините эффект fadeIn с функцией jQuery .css () - PullRequest
Новая
       11

Объедините эффект fadeIn с функцией jQuery .css ()

0 голосов
/ 08 июля 2019

Я работаю над меню моего сайта, которое вы можете открыть, нажав кнопку меню гамбургера (.menu-button). При щелчке он открывает div #menu (этот div охватывает весь видовой экран), запустив следующий скрипт: 

<script>
    $('.menu-button').on('click', function() {
        if ($('#menu').css('display') == 'none') {
            $('#menu').css('display', 'block');
        } else {
            $('#menu').css('display', 'none');
        }
    });
</script>

Теперь я бы хотел, чтобы div #menu появился с эффектом fadeIn. Итак, имея этот код, как мне это сделать?

Ответы [ 3 ]

1 голос
/ 08 июля 2019

Вы можете достичь того, что вам нужно, и упростить логику, используя fadeToggle() вместо: 

$('.menu-button').on('click', function() {
  $('#menu').fadeToggle();
});
.menu-button {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 1000;
}

#menu {
  background-color: rgba(0, 0, 0, 0.5);
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: none;
} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="menu-button">Toggle menu...</button>
<div id="menu"></div>
0 голосов
/ 08 июля 2019

Вы можете использовать animate и обратный вызов display:hide после анимации 

    $('.menu-button').on('click', function() {
        if ($('#menu').css('display') == 'none') {
            $('#menu').css('display', 'block');
          $('#menu').animate({'opacity':'1'},400)
        } else {
            
          $('#menu').animate({'opacity':'0'},400,function(){
            $('#menu').css('display', 'none');
          })
        }
    });
div {
  width:100px;
  height:100px;
  border:1px solid #000;
}

#menu {
  opacity:0;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menu-button'>
</div>
<div id='menu' style='display:none'>
  dzq
</div>
0 голосов
/ 08 июля 2019

При событии щелчка вы можете переключить класс в элементе меню, который вызывает CSS переход 

<script>
    var menu = document.getElementById('menu');
    $('.menu-button').on('click', function() {
        menu.classList.toggle('visible');
    });
</script>

CSS 

#menu {
   opacity: 0;
   transition: opacity 1s 0s;
}

#menu.visible {
   opacity: 1;
}
...