[英]jQuery background image change on timer
I have a div: 我有一个div:
<div class="coverImage" style="background-image:url('3.2.5\\assets\\img\\backgroundCanvas1.jpg');"></div>
and an attached jQuery script to rotate its background every 20 seconds 和一个附加的jQuery脚本,每20秒旋转一次背景
var coverChange =
{
init: function()
{
var itemInterval = 20000;
var numberOfItems = 4;
var currentItem = 1;
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
//loop through the items
var infiniteLoop = setInterval(function(){
$('.coverImage').attr("style", "background-image:url()");
if(currentItem == numberOfItems -1){
currentItem = 1;
}else{
currentItem++;
}
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
}, itemInterval);
}
};
coverChange.init();
When the image changes it happens to white out the bottom half until I scroll slightly. 当图像改变时,它会使下半部变白,直到我稍微滚动一下。 My main ask is help with a fadeIn of the new image. 我的主要问题是帮助淡入新图像。 (everything else is secondary) (其他都是次要的)
I have experimented using the jQuery fadeIn property but cannot get it to work in a seamless aesthetically pleasing way. 我已经尝试过使用jQuery fadeIn属性,但是无法使其以无缝的美观方式工作。
I am not looking for code elegance only function, as you can tell :-) 正如您所知道的,我不是在寻找仅代码优雅的功能:-)
PS Loading the image initially via CSS did not work. PS最初通过CSS加载图像无效。
You should be able to add a simple CSS transition to your coverImage element. 您应该能够向coverImage元素添加一个简单的CSS过渡。
.coverImage {
transition: background 1s;
}
I've created a working example at https://jsfiddle.net/mark_c/pa44n42k/1/ 我在https://jsfiddle.net/mark_c/pa44n42k/1/创建了一个工作示例
For a fade in out effect, you should simply fade out the div
before this step: 要获得淡入效果,只需在此步骤之前淡出div
:
$('.coverImage').attr("style", "background-image:url()");
and fade it in after this step: 然后在此步骤后淡入:
$('.coverImage').attr("style", "background-image:url('3.2.5/assets/img/backgroundCanvas"+currentItem+".jpg'");
For fade in out you can use simple jquery as I suppose you already have but not the right way, so good luck. 为了淡出,您可以使用简单的jquery,因为我想您已经拥有了但不是正确的方法,所以祝您好运。
This will give you a nice fade in/out effect. 这将为您提供良好的淡入/淡出效果。 :) :)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.