因此,我正在尝试创建一个简单的渐变幻灯片放映,其中包含五张幻灯片,在完成后会重复播放。
我觉得我得到的东西应该有用,但事实并非如此。
<script type="text/javascript">
$(document).ready(function() {
function playslide(){
setTimeout(function(){
$("#slide-two").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 10000);
setTimeout(function(){
$("#slide-three").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 20000);
setTimeout(function(){
$("#slide-four").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 1, 'swing')}, 30000);
setTimeout(function(){
$("#slide-five").animate({"opacity":"1"}, 2000, 'swing').delay(11000).animate({"opacity":"0"}, 2000, 'swing')}, 40000);
}
playslide();
});
</script>
想法是,第一张幻灯片的不透明度始终设置为 1,这样当最后一张幻灯片淡出时,就好像它重新开始一样。每张幻灯片将在淡出前保持 10 秒,每张幻灯片淡入后,上一张幻灯片的不透明度将设置回 0,为下一次重复播放做好准备。
我希望这不是一个明显的错误。抱歉,如果是...
最佳答案
请问为什么不使用 .fadeIn()
和 .fadeOut()
呢?
setTimeout(function () {
$("#slide-two").fadeIn(400, function () {
setTimeout(function () {
$("#slide-two").fadeOut(function () {
$("#slide-three").fadeIn(400, function () {
// So on...
});
}, 1000);
});
}, 1000);
最好使用这些函数来执行此操作,而不是手动设置不透明度动画。
关于javascript - jQuery CSS 不透明度动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32097438/