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

Question

[mpxxx]

Нужно, чтобы плашка плавно выезжала, когда проскролливаешь блок и также плавно уезжала, когда возвращаешься назад.
Сделал здесь демку
1) Но назад плашка исчезает мгновенно.
2) До и при показе, когда внутри нее кнопка, на рабочем сайте плашка подтормаживает.

Answer 1

[Денис Инешин]

Используйте CSS анимацию. А на JS только добавляйте/убирайте класс

Comments

[mpxxx]

Спасибо! Так и сделал jsbin.com/kofigegapi/1/edit?html,css,js,output

Answer 2

[Илья Шатохин]

'.block-hid' должен скрываться по окончанию анимации, а не до.

$(window).scroll(function () {
    if ($(window).scrollTop() >= $('.block2').offset().top + $('.block2').height()) {
        $('.block-hid').addClass("block-hid--visible");
        $('.block-hid').stop().animate({
            bottom: "0px"
        }, 900);
    };
    
                                   
    if ($(window).scrollTop() < 250 && $('.block-hid').hasClass("block-hid--visible")) {
        $('.block-hid').stop().animate({
            bottom: "-100"
        }, 1000, function () {
          $('.block-hid').removeClass("block-hid--visible");
        });
    };
});

Comments

[mpxxx]

Спасибо!
Хотя все-таки css-анимация работает плавнее.

[Илья Шатохин]

mpxxx: да, css всегда плавнее, но и код тут тоже неоптимален.
p.s. отмечайте решение, если все верно.