jQuery淡入淡出动画在两者之间显示白色
jQuery FadeIn and FadeOut animation show white color inbetween
我每5秒更改一次div的背景图像,使其看起来更好,我将图像添加到div中作为background
。我的脚本在图像过渡之间添加了白色,这让它看起来很糟糕,我试图修复它,但似乎效果不佳。下面的代码片段现在显示了使用淡入效果的图像,如果我将淡入添加到其中,那么它将在过渡之间添加白色。
var imgSrcs = [
"../img/bg1.jpg",
"../img/bg2.jpg",
"../img/bg3.jpg",
"../img/bg4.jpg",
"../img/bg5.jpg"
];
var index = 1;
$('.intro').css("background-image", "url(" + imgSrcs[0] + ")")
$('.intro').fadeIn('slow', animateBackground());
function animateBackground() {
window.setTimeout(function () {
var url = imgSrcs[index];
index++;
if (index == 5)
index = 0;
$('.intro').delay(5000).fadeIn(1000, function () {
$(this).css("background-image", "url(" + url + ")")
}).fadeIn(1000, animateBackground())
});
}
我不知道如何解决这个问题,所以它将工作图像淡出&图像之间的淡入
Fiddlehttp://jsfiddle.net/7xxx6ah3/5/
使用此
<script type="text/javascript">
$('#background_cycler').hide();//hide the background while the images load, ready to fade in later
</script>
<img class="active" src="images/img1.jpg" alt=""/>
<img src="images/img2.jpg" alt="" />
<img src="images/img3.jpg" alt="" />
<img src="images/img4.jpg" alt=""/>
<img src="images/img5.jpg" alt="" />
</div>
<style>
#background_cycler{padding:0;margin:0;width:100%;position:absolute;top:0;left:0;z-index:-1}
#background_cycler img{position:absolute;left:0;top:0;width:100%;z-index:1}
#background_cycler img.active{z-index:3}
</style>
<script>
function cycleImages() {
var $active = $('#background_cycler .active');
var $next = ($('#background_cycler .active').next().length > 0) ? $('#background_cycler .active').next() : $('#background_cycler img:first');
$next.css('z-index', 2);//move the next image up the pile
$active.fadeOut(1500, function () {//fade out the top image
$active.css('z-index', 1).show().removeClass('active');//reset the z-index and unhide the image
$next.css('z-index', 3).addClass('active');//make the next image the top one
});
}
$(window).load(function () {
$('#background_cycler').fadeIn(1500);//fade the background back in once all the images are loaded
// run every 7s
setInterval('cycleImages()', 7000);
})
</script>
相关文章:
- jQuery淡入淡出动画在两者之间显示白色
- 两者之间有什么区别..函数中的参数和参数
- Array.indexOf 或介于两者之间
- Postgresql JSON 键在字母之间显示下划线
- 选择两种颜色并在两者之间选择n种颜色
- Regex,它搜索一个起始字符,介于两者之间的任何字符,然后是一个结束字符
- 这两者之间有什么区别
- 在两者之间执行 ajax 时粘贴到输入时缺少按键事件
- 正则表达式包括两个固定字符串和介于两者之间的所有内容
- 获取父对象并通过介于两者之间的窗体传递给其他方法
- 这两者之间有什么区别
- 字符、符号或数字之前或之后的空格;但是,不介于两者之间
- 在页面之间显示“页面加载”消息
- Javascript匹配字符并在两者之间添加空格
- 如何使用 HTML 或 CSS 或 JS 重叠两个图像并在两者之间划一条交叉线,如以下示例所示
- AJAX 灯箱微调器弹出窗口,以在页面之间显示
- 指令和控制器之间的通信,中间作用域介于两者之间
- 为什么在浏览器之间显示我的网络摄像头图像会有所不同
- 如何将音频源与外部视频以及两者之间的交叉音量同步
- 都是'sync'event和Backbone.sync以某种方式连接在一起——两者之间有什么区别