Question

我想更清楚一点，页面上的元素是可点击的。

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

这是我目前的尝试，但我确定它没有正确的线程。我认为它只会延迟页面的负载。它只是尝试将元素的css类更改为2秒，然后将其设置回来。

app.put('/up/:file', function (req, res, next) {
  // TODO: optionally validate `req.headers['content-type']`
  // TODO: sanitize `req.params.file` before
  // using it to create the filename
  var filename = req.params.file;
  var diskStream = fs.createWriteStream(path.join(__dirname, 'uploads', filename));
  req.pipe(diskStream).on('finish', function() {
    res.send('got that');
  });
});

Answer 1

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/

Answer 2

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

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

如果你使duration param比实际的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>

Answer 3

这是一个插件。我用我所有的想象力为它创造了一个名字。

$(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>

逐个为一组元素设置投影动画

3 个答案: