为一组元素逐个设置放置阴影的动画

Animating a drop shadow for a group of elements one by one

本文关键字：设置 阴影 动画 元素 一组      更新时间：2023-09-26

我想让页面上的元素可以点击这一点更加明显。

要做到这一点，当页面加载时，我想循环浏览它们，并让阴影显示大约一秒钟左右，然后将其恢复到原始状态，然后继续下一个。我只想循环元素一次。

这是我目前的尝试，但我确信它没有线程化。我认为这只是延迟了页面的加载。它只是尝试更改元素的css类2秒钟，然后将其设置回原位。

function animateBarGraph() {
    var elements = $(".element");
    elements.each(function() {
        $(this).css({
            'class': 'dropShadowClass'
        }).delay(2000);
        $(this).css("class", "element");
    });

我认为这里需要两个参数：一个是step（激活两个元素之间的持续时间）和duration（一个特定元素的上升开始和下降开始之间）。

玩step和duration，直到你喜欢结果。上升和下降的实际持续时间设置在box-shadow transition（CSS：.6s）中。

如果使duration参数比实际CSS持续时间短，它将在完成上升之前开始下降。可能看起来很奇怪。

我还添加了悬停的上升/下降效果。这似乎更自然。

以下是我的做法：

$(document).ready(function () {
    $custAnim = {
        'step': 300,
        'duration': 600,
        'animateBarGraphElement': function (elem) {
            elem.addClass('animated');
            setTimeout(function() {
                elem.removeClass('animated');
            }, $custAnim.duration
            );
        },
        'animateBarGraph': function (i) {
            var elements = $(".element");
            if (elements.length > i) {
                $custAnim.animateBarGraphElement(elements.eq(i));
                setTimeout(function () {
                    $custAnim.animateBarGraph(i + 1);
                }, $custAnim.step);
            }
        }
    };
    $custAnim.animateBarGraph(0);
});
body {
    background-color: #f5f5f5;
}
.container {
    position: relative;
    width: 100%;
}
button, .element {cursor: pointer;}
.element {
    background-color: white;
    border-radius: 4px;
    width: 60px;
    display: inline-block;
    height: 60px;
    margin: 10px;
    padding: 20px;
    box-shadow: 0 1px 3px 0 rgba(0,0,0,.2),0 1px 1px 0 rgba(0,0,0,.14),0 2px 1px -1px rgba(0,0,0,.12);
    transition: box-shadow .6s ease;
}
.element.animated, .element:hover {
    box-shadow: 0 3px 5px -1px rgba(0,0,0,.2),0 5px 8px 0 rgba(0,0,0,.14),0 1px 14px 0 rgba(0,0,0,.12);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
    <div class="container">
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
        <div class="element"></div>
    </div>
    <button onclick="$custAnim.animateBarGraph(0)">Run again</button>
</body>

delay是最糟糕的选择，就我个人而言，我会玩css动画，你可以设置它必须执行的次数（在这种情况下为1）和动画延迟。但既然时间就是金钱，我在膝盖上做了这样的东西，希望你觉得它有用：

function addShadow(elm){$(elm).addClass('shadow'); console.log(elm)}
function removeShadow(elm){$(elm).removeClass('shadow')}
$(document).ready(function(){
    var elements = $("a, button");
    var duration = 1000;
    $.each(elements, function(i, elm) {
        window.setTimeout(addShadow, i*duration, elm);
        window.setTimeout(removeShadow, (i*duration + duration), elm);
    });
});

http://jsfiddle.net/dcvbc82x/

这里有一个插件。我用了我所有的想象力为它命名。

$(document).ready(function() {
    $('.element').ripple('dropShadowClass', 2000);
});
(function ( $ ) {
 
    $.fn.ripple = function(cssClass, mills) {
        var delay = 0;
        return this.each(function() {
            var $self = $(this);
            setTimeout(function() {
                $self.addClass(cssClass);
                setTimeout(function() {
                  $self.removeClass(cssClass);
                }, mills);
            }, delay);
            delay += mills;
        });
    };
 
}( jQuery ));
.dropShadowClass {
    box-shadow: 1px 1px 3px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
  <body>
  <a href="#" class="element">Link</a>
  <a href="#" class="element">Link</a>
  <a href="#" class="element">Link</a>
  <a href="#" class="element">Link</a>
  </body>
</html>

相关文章：