Question

现在，我有以下JQuery .animate命令，它将行图像从top:0px移动到top:200px。

$("#scanner").animate({ top: '200px' }, 2000);

如何将线条图像从200px动画回0px等等，再到200px，反复无限地动画？

（为了澄清，动画就像一个条形码扫描仪。）

Answer 1

将其设置为成功回调

function topInc(){
  $("#scanner").animate({ top: '200px' }, 2000, topDec);
}

function topDec(){
  $("#scanner").animate({ top: '0' }, 2000, topInc);
}

topInc();

Answer 2

如果有人需要它，CSS解决方案将是：

.scan-box {
    position: relative;
    width: 200px;
    height: 200px;
    border: 1px solid black;
}

#scanner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
    background: none rgba(255, 0, 0, .5);
    animation: scanning 3s linear infinite;
}

@keyframes scanning {
    0% {
        top: 0;
    }
    50% {
        top: calc(100% - 10px);
    }
    100% {
        top: 0;
    }
}

<div class="scan-box">
    Scanning...
    <div id="scanner"></div>
</div>

作为奖励，可以通过其他样式或使用CSS Variables来完成一些自定义：

:root {
    --data-from: 0;
    --data-to: 100%;
}

.scan-box {
    position: relative;
    width: 150px;
    height: 150px;
    border: 1px solid black;
    float: left;
    margin: 0 10px 10px 0;
}

.scanner {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 10px;
    background: none rgba(255, 0, 0, .5);
    animation: scanning 3s linear infinite;
}

.scanner-ease-in-out {
    animation: scanning 3s ease-in-out infinite;
}

@keyframes scanning {
    0% {
        top: var(--data-from);
    }
    50% {
        top: calc(var(--data-to) - 10px);
    }
    100% {
        top: var(--data-from);
    }
}

<div class="scan-box">
    Scanning...
    <div class="scanner"></div>
</div>

<div class="scan-box">
    Scanning...
    <div class="scanner scanner-ease-in-out"></div>
</div>

<div class="scan-box">
    Scanning...
    <div class="scanner" style="--data-from:25%;--data-to:75%"></div>
</div>

同样在JSFiddle。

使用JQuery .animate无限地上下移动元素

2 个答案: