时间戳

首页 > 解决方案 > 从顶部为小吃店设置动画

jquery - 从顶部为小吃店设置动画

问题描述

我想显示小吃栏以从顶部对其进行动画处理。我尝试使用 jquery 中的 animate 方法，但它仍然看起来好像正在淡入。我不希望看到淡入效果。我在下面提到了 Jquery animate 方法的代码。

            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 with CSS and HTML JSFiddle

标签： jqueryhtmlcss

解决方案

尝试将最高值与吐司的高度相同。这里 Toast 高度是 58px。所以给顶部：-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;
}

小提琴 https://jsfiddle.net/dmu83k0o/

推荐阅读