Question

我的网站有一个广场格式的新闻栏目，像Metro UI一样动画很多。广场每5-10秒（随机）动画一次，并在文本和图片之间交换。

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

我尝试用.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

而不是.delay()使用setTimeout，这更适合取消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

jQuery - 暂停动画

1 个答案: