Анимируйте закусочную сверху

Question

Я хочу отобразить снэк-бар, чтобы оживить его сверху. Я попытался использовать метод animate в jquery, но он все еще выглядит так, как будто он постепенно исчезает. Я не хочу, чтобы эффект исчезновения был видимым. Я упомянул код ниже для Jquery метода анимации.

            function bounce(bouncingCount, speed) {
                var top = -100;
                var speedRatio = speed / top;
                var heightRatio = top / bouncingCount;

                for (var i = 1; i <= bouncingCount; i++) {
                    $('#snackbar').animate({
                        'top': 0
                    }, speed);
                    $('#snackbar').animate({
                        'top': 0
                    }, speed / 2);
                    top = top - (heightRatio);
                    speed = speedRatio * top;
                }
            }
            var a = setTimeout(function (e) {
                $('#snackbar').show("slow");
                bounce(1, 500);
            }, 5000);

Отправил код в Fiddle с CSS и HTML JSFiddle

Answer 1

попытайтесь дать максимальное значение столько же, сколько и высоту тоста. Здесь высота тоста составляет 58 пикселей. Так что давайте топ: -58px.

.toaster.errorMsgBlock {
    display: none;
    position: absolute;
    top: -58px;
    left: 0;
    background: #ffdbdb;
    width: 100%;
    padding: 17px;
    border-left: 8px solid #ff0000;
    -webkit-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 14px 0 rgba(0, 0, 0, 0.12), 0 5px 8px 0 rgba(0, 0, 0, 0.14), 0 3px 5px -1px rgba(0, 0, 0, 0.2);
    font-family: '3MCircular-Book';
    font-size: 16px;
    font-weight: normal;
    line-height: 1.25;
    color: #323234;
}

Fiddle https://jsfiddle.net/dmu83k0o/