Как сделать анимацию плавной jQuery?

Question

[Elliot Alderson]

Есть вот такая супер простая анимация, что при наведении на блок с классом .kvadrat, появляется кнопка с классом .knopka
и двигается текст с классом .text, все работает как должно, но что надо сделать, чтобы это все было плавным, вот код

HTML

<div class="kvadrat">
    <div class="text">texttexttxt</div>
    <button class="knopka">asdzxcasdzxc</button>
</div>


    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
    <script>
    $(".kvadrat").mouseenter(function(){
        $(".knopka").css({
            'display' : 'block'
        });
        
        $(".text").css({
            'margin-bottom' : '30%'
        });
    });
        
            $(".kvadrat").mouseleave(function(){
        $(".knopka").css({
            'display' : 'none',
        });
                
        $(".text").css({
            'margin-bottom' : '15%'
        });
    });
        
    </script>

Answer 1

[Сергей c0re]

см. css свойство transition
Добавьте в стили для .text и .knopka - transition: all 1s;
а вместо display используйте opacity

body {
  background: red;
  padding: 20px;
  font-family: Helvetica;
}

.text {
  margin-bottom : 15%;
  transition: all 1s;
}

.knopka  {
  opacity: 0;
  transition: all 1s;
}

$(".kvadrat").mouseenter(function(){
        $(".knopka").css({
            'opacity' : '1'
        });
        
        $(".text").css({
            'margin-bottom' : '30%'
        });
    });
        
            $(".kvadrat").mouseleave(function(){
        $(".knopka").css({
            'opacity' : '0',
        });
                
        $(".text").css({
            'margin-bottom' : '15%'
        });
    });

Comments

[Elliot Alderson]

Спасибо большое, очень выручили, все работает