jQuery -暂停动画

jQuery - pause animation

本文关键字：动画 暂停 jQuery      更新时间：2023-09-26

我的网站有一个方形格式的新闻部分，动画很像Metro UI。该方块每5-10秒(随机)动画一次，并在文本和图片之间切换。

小提琴

现在我想让动画在用户鼠标悬停时立即切换到文本阶段，并保持在那里，直到鼠标离开。当用户鼠标退出时，动画可以在鼠标进入之前留下的任何延迟中恢复，或者立即切换到图像阶段。我更喜欢第一种方法，但任何方法都可以。

我试着用.hover做点什么，但我不知道如何最好地暂停/恢复动画。欢呼。

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

编辑:小提琴有一个问题。现在固定。

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

.delay()方法最适合用于延迟排队的jQuery效果。因为它是有限的——例如，它没有提供一种取消延迟的方法——.delay()不能替代JavaScript的原生 setTimeout 函数，后者可能更适合某些用例。

参考

此外，在您的情况下，使用类而不是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

相关文章：