是否可以这样做: 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 ......
提前非常感谢你。
答案 0 :(得分:0)
要使你的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>
&#13;
答案 1 :(得分:0)
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);
})
})
我重构你的代码并创建一个动画函数来实现。