交叉渐变 DIV + 悬停时停止动画

Question

是否可以这样做： http://jsfiddle.net/arunpjohny/asTBL/

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
setInterval(function () {
    $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}, 2500)
})

但是 DIV 直接相互淡入淡出而不是先淡入白色然后再从白色淡出？

此外，是否可以在悬停时停止动画（并在不悬停时恢复动画）？

我搜索了几种解决方案，但找不到解决方法（我是 javascript 的菜鸟）。 CSS 解决方案不符合我的需求，因为它们无法与内部包含链接的 DIV 一起正常工作...

在此先感谢您。

Answer 1

要使您的 div 同时淡出，您需要添加一些样式（使引号彼此重叠）并且运行同时淡出。然后你需要清除悬停超时以暂停动画：

jQuery(function () {
    var $els = $('div.quote'),
        i = 0,
        len = $els.length;

    $els.slice(1).hide();
    var fadeInterval = setFadeInterval(); // starts the fader

    $els.hover(function () {
        clearInterval(fadeInterval); // stops the fader on mouseover
    },

    function () {
        fadeInterval = setFadeInterval(); // restarts the fader on mouseout
    });

    function setFadeInterval() {
        return setInterval(function () {
            $els.eq(i).fadeOut(); // run the faders at the same time
            i = (i + 1) % len
            $els.eq(i).fadeIn();
        }, 2500);
    }
});

/* make the faders sit on top of each other */
#quote-holder {
    position:relative;
}
#quote-holder > .quote {
    position:absolute;
    top:0;
    left:0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="quote-holder">
    <div id="quote1" class="quote"> <span class="quote">I am a quote</span>
 <span class="author">Author Name</span>

    </div>
    <div id="quote2" class="quote">I am another quote</div>
    <div id="quote3" class="quote">I am yet another quote</div>
</div>

Answer 2

JSFIDDLE

jQuery(function () {
var $els = $('div[id^=quote]'),
    i = 0,
    len = $els.length;

$els.slice(1).hide();
var timer = setInterval(animation, 2500)
function animation(){
     $els.eq(i).fadeOut(function () {
        i = (i + 1) % len
        $els.eq(i).fadeIn();
    })
}
$('#content').hover(function (){
clearInterval(timer);  
  },function (){
  setInterval(animation,2500);
})

})

我重构你的代码，创建一个动画功能来实现。

交叉渐变 DIV + 悬停时停止动画

Crossfading DIVs + stopping animation on hover

html

javascript

css

jquery

image