Как сделать плавной появление блока?

Question

[Максим]

Подскажите, как сделать, чтобы после загрузки html кода в блок после ajax запроса, блок .favorite-products плавно выезжал справа?

сейчас он плавно появляется и все

$('.favorite-btn').on('click', function (e) {
    e.preventDefault();
    $.ajax({
      method: 'GET',
      url: '/favorites/get',
      success: function (response) {
        $('.toggle-dialog-container').html(response);
        $('.toggle-dialog').fadeIn();
        $('.favorite-products').animate({
          right : "0"
        });
      },
      error: function (jqXHR, textStatus, errorThrown) {
      }
    });
  });

.favorite-btn{
    display: block;
    width: 30px;
    height: 30px
    background-color: #000000;
    margin-bottom: 40px;
}
.toggle-dialog{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9991;
  display: none;
  overflow: hidden;
  outline: 0;
}

.toggle-dialog-background{
  position: absolute;
  background: rgba(0,0,0,.3);
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}
.favorite-products{
  position: absolute;
  top: 0;
  right: 0;
  padding: 15px;
  overflow: auto;
  height: 100%;
  width: 295px;
  background-color: #FFF;
  transition: .5s;
}
.toggle-dialog-container {
  padding: 0 0 20px;
  overflow: auto;
  height: 100%;
}

<div class="favorite-btn"></div>
<div class="toggle-dialog">
  <div class="toggle-dialog-background"></div>
  <div class="toggle-dialog-container">
    
  </div>
</div>

Answer 1

[Danny Arty]

В скрипте вместо

$('.favorite-products').animate({
          right : "0"
        });

попробуйте написать:

$(".favorite-products").animate({right: '0'}, "slow");

И в CSS поставьте значение например right: -300px;

Answer 2

[Rerurk]

Вот так ->google.com -> html анимация

Comments

[Максим]

я в toggle-dialog-container вставляю html содержимое <div class="favorite-products">sad</div> и после того как вставил, нужно сделать плавный выезд справа

сейчас, и при первом выполнение просто появляется блок, при повторном нажатии на кнопку <div class="favorite-btn"></div> уже выезжает справа

[Danny Arty]

гениальный ответ