Question

我试图让多个div淡入淡出。然后在悬停时，暂停动画。然后在悬停时，继续动画。现在我已经到了这么远，div正确地淡入淡出，并且在悬停时停止。但是当我徘徊时，动画不会重新开始。关于我做错了什么的建议？

var timer;
$(document).ready(function(){
    $(function startTimer(){
        $('#quotes .textItem:gt(0)').hide();
        timer = setInterval(function(){$('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes');}, 1000);
    });

    $('#quotes').hover(function (ev) {
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});

这是我的jfiddle：

Answer 1

试试这个

<div class="container">

        <img src="Banner/SODA8.png"/>                         

</div>

.container{
margin-top:50px;
height:200px;
min-height:200px;
background-image:url(hex/hex4.jpg);
background-position: center;
background-repeat:repeat;
background-size:cover;
line-height:300px;
}

.container img{
margin-left:auto;
margin-right:auto;
vertical-align:middle;
max-width:100%;
max-height:100%;
display:block;
}

DEMO HERE

Answer 2

尝试在startTimer()后面调用$('#quotes .textItem:gt(0)').hide();来调用startTimer()作为jQuery()来电的参数。

var timer;
$(document).ready(function () {

    function startTimer() {
        timer = setInterval(function () {
            $('#quotes > :first-child').fadeOut().next('div').fadeIn().end().appendTo('#quotes');
        }, 1000);
    };
    $('#quotes .textItem:gt(0)').hide();
    startTimer();
    $('#quotes').hover(function (ev) {
        clearInterval(timer);
    }, function (ev) {
        startTimer();
    });
});

jsfiddle http://jsfiddle.net/cc1bewvk/6/

JQuery setInterval，在悬停时暂停

2 个答案: