jQuery - 暂停动画

Question

我的网站有一个正方形格式的新闻部分，其动画效果非常类似于 Metro UI。方块每 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);
}

编辑：小提琴有问题。现已修复。

Answer 1

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

.delay() 方法最适合在排队的 jQuery 效果之间进行延迟。因为它是有限的——例如，它不提供取消延迟的方法——.delay() 不能替代 JavaScript 的原生 setTimeout 函数，这可能更适合某些用例。

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());
}

注意，我将slide 类添加到每个news-tile 元素（因为您有更多带有news-tile 类的部分）。

JSFiddle