交叉淡入淡出 DIV + 悬停时停止动画

Crossfading DIVs + stopping animation on hover

本文关键字：动画 悬停 淡入 淡出 DIV      更新时间：2023-09-26

可以这样做吗：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 解决方案不符合我的需求，因为它们无法与内部有链接的 DIF 一起正常工作......

提前非常感谢你。

要使您的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>

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

}）

我重组您的代码并创建一个动画函数来实现。

相关文章：