从顶部开始对快餐栏进行动画处理

时间:2020-01-09 11:21:02

标签: jquery html css

我想显示小吃栏以使其动画从顶部开始。我在jquery中尝试了animate方法,但它看起来仍然在淡入。我不希望看到淡入效果。我已经在下面提到了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);

使用CSS和HTML在Fiddle中发布了代码 JSFiddle

1 个答案:

答案 0 :(得分:1)

尝试赋予与烤面包高度相同的最高价值。在这里,吐司高度为58px。所以给顶部:-58px。

$(window).bind("load", function() {
    //code here
});

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