Nordeezy
@Nordeezy
#fsoceity

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

Есть вот такая супер простая анимация, что при наведении на блок с классом .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>


5d790dc695616327773446.png
5d790d9986088279289255.png
  • Вопрос задан
  • 333 просмотра
Решения вопроса 1
erge
@erge
Примус починяю
см. 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%'
        });
    });
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы