javascript - jQuery - 暂停动画

Question

我的网站有一个正方形格式的新闻部分，它像 Metro 用户界面一样充满活力。正方形每 5-10 秒(随机)动画一次，并在文本和图片之间切换。

FIDDLE

我现在希望动画在用户鼠标悬停时立即切换到文本阶段，并保持在那里直到鼠标移开。当用户将鼠标移出时，动画可以在鼠标移入之前留下的任何延迟恢复，或者立即切换到图片阶段。我更喜欢第一个，但任何解决方案都有效。

我尝试使用 .hover 做一些事情，但我不确定如何最好地暂停/恢复动画。干杯。

HTML

<div class="news-container">
    <div>
        <div class="news-window">
            <div class="date"><span>05</span><div>Sep</div></div>
            <div class="news-tile" id="1">
                <div class="news-pic" style="background-image:url('https://pbs.twimg.com/profile_images/378800000532546226/dbe5f0727b69487016ffd67a6689e75a.jpeg');"></div>
                <div class="news-title"><div>News Title</div></div>
            </div>
        </div>
        <div class="news-window">
            <div class="date"><span>28</span><div>Aug</div></div>
            <div class="news-tile" id="2">
                <div class="news-pic" style="background-image:url('https://www.petfinder.com/wp-content/uploads/2012/11/155293403-cat-adoption-checklist-632x475-e1354290788940.jpg');"></div>
                <div class="news-title"><div>News Title</div></div>
            </div>                          
        </div>
        <div class="news-window">
            <div class="date"><span>17</span><div>Aug</div></div>
            <div class="news-tile" id="3">
                <div class="news-pic" style="background-image:url('https://www.petfinder.com/wp-content/uploads/2012/11/99233806-bringing-home-new-cat-632x475.jpg');"></div>
                <div class="news-title"><div>News Title</div></div>
            </div>
        </div>
    </div>
</div>

CSS

.news-container {
    text-align: center;
    display: inline-block;
    vertical-align: top;

}

.news-window {
    display: inline-block;
    overflow: hidden;
    background: #EFEFEF;
    width: 230px;
    height: 200px;
    margin: 0 15px;
    cursor: pointer;
}

.news-tile {
    width: 230px;
    height: 400px;
    position: relative;
    top: 0px;
}

.news-pic {
    width: 100%;
    height: 200px;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
}

.news-title {
    width: 100%;
    height: 200px;
    background: #5D697B;
    color: orange;
    font-size: 18px;
    display: table;
}

.news-title div {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.news-window .date {
    width: 50px;
    height: 56px;
    background: orange;
    position: absolute;
    z-index: 100;
    opacity: 0.5;
    line-height: 1.25;
    font-size: 14px;
}

.news-window .date span {
    font-size: 28px;
}

JS

$(document).ready(function(){
    move(1);
    move(2);
    move(3);
});

function random(){
    return ((Math.random() * 5000) + 5000);
}

function move(i) {
    $("#" + i + ".news-tile").delay(random()).animate({top: "-200px"}, 600, 'easeOutCirc');
    $("#" + i + ".news-tile").delay(random()).animate({top: "0"}, 600, 'easeOutCirc');
    window.setTimeout(function() {move(i) }, 500);
}

编辑:Fiddle 有问题。现已修复。

Answer 1

使用 setTimeout 代替 .delay()，这更适合在 hover() 上取消动画的情况。

The .delay() method is best for delaying between queued jQuery effects. Because it is limited—it doesn't, for example, offer a way to cancel the delay—.delay() is not a replacement for JavaScript's native setTimeout function, which may be more appropriate for certain use cases.

Reference

此外，在您的情况下使用类而不是 id 属性会更方便。

我会这样做(更新):

$('.news-window').each(function(i, el){
    el.timer = setTimeout(function(){moveUp.call(el)}, random());
}).hover(function(){moveUp.call(this, true)}, moveDown);

function random(){
    return ((Math.random() * 5000) + 5000);
}

function moveUp(x){
    var that = this;
    $('.slide', that).stop().animate({top:"-200px"}, 600, 'swing');
    clearTimeout(that.timer);
    that.timer = x || setTimeout(function(){moveDown.call(that)}, random());
}

function moveDown(){
    var that = this;
    $('.slide', that).stop().animate({top:"0"}, 600, 'swing');
    clearTimeout(that.timer);
    that.timer = setTimeout(function(){moveUp.call(that)}, random());
}

注意，我向每个 news-tile 元素添加了 slide 类(因为您有更多的部分带有 news- tile 类)。

JSFiddle