jQuery不会淡化正确的图像

Question

我正在创建一个简单的矩阵样式幻灯片放映，其中四分之一的图像淡入数组中的下一图像。 与屏幕上的位置相关的索引会增加，图像网址的索引和会增加。 在3处，我将imagePosition重置为从0重新开始，并且当imageUrl索引达到数组的长度时，我也进行了重置。

但是，问题在于该图像将重置为与该位置已经存在的图像相同的图像。 当我记录该URL时，它是不同的，但是dom不会更新，并且我检查时的链接保持不变。

我尝试使用小于4的随机索引，这似乎可行，但是我需要它依次遍历屏幕上的所有位置。

每5秒调用一次fadeToImage并传递相同的数组。

（我知道代码是重复的，以后要重构）

 var urlArray = ["http://nerdist.com/wp-content/uploads/2016/07/EranGOTGif0007.gif", "https://jimpix.co.uk/ink/ecards/angif_octopus.gif", "http://i.imgur.com/cmefPHy.gif", "http://miscmedia-9gag-fun.9cache.com/images/thumbnail-facebook/1449833420.8507_ePysAs_n.jpg", "https://media.giphy.com/media/9fbYYzdf6BbQA/giphy.gif", "http://static1.squarespace.com/static/552a5cc4e4b059a56a050501/565f6b57e4b0d9b44ab87107/566024f5e4b0354e5b79dd24/1449141991793/NYCGifathon12.gif", "http://67.media.tumblr.com/50af8ed4e4afcc4530c83057db147a91/tumblr_nltc6y6pau1rx5rfmo1_1280.gif"]; setInterval(function() { fadeToImage(urlArray); }, 5000); var cycled = false; var count = 4; var imagePosition=0; function fadeToImage(urlArray) { if (cycled === false){ count = 4; imagePosition=0; console.log("setting first images") $(".display-image-0").attr("style", "background:url(\\"" + urlArray[0] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); $(".display-image-1").attr("style", "background:url(\\"" + urlArray[1] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); $(".display-image-2").attr("style", "background:url(\\"" + urlArray[2] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); $(".display-image-3").attr("style", "background:url(\\"" + urlArray[3] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); cycled = true; } else { if (imagePosition < 4) { console.log(count) if (count < urlArray.length) { console.log("image position less than 4, count < array", imagePosition, count, urlArray[count] ) $(".display-image-" + imagePosition).fadeTo(1000, 0, function () { $(".display-image-" + imagePosition).attr("style", "background:url(\\"" + urlArray[count] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); }).fadeTo(2000, 1); count++; } else { cycled = false; } imagePosition++; } else { imagePosition = 0; if (count < urlArray.length) { $(".display-image-" + imagePosition).fadeTo(1000, 0, function () { $(".display-image-" + imagePosition).attr("style", "background:url(\\"" + urlArray[count] + "\\"); background-size: auto 100%; background-repeat: no-repeat; background-position: center; transform: rotate(90deg);"); }).fadeTo(2000, 1); count++; } else { cycled = false; } imagePosition++; } } } 

 .display-image-0 { position: fixed; left: 0px; top: 0px; height: 33%; width: 50%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .display-image-1 { position: fixed; right: 0px; top: 0px; height: 33%; width: 50%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .display-image-2 { position: fixed; left: 0px; bottom: 0px; height: 33%; width: 50%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } .display-image-3 { position: fixed; right: 0px; bottom: 0px; height: 33%; width: 50%; background-size: 100% 100%; background-repeat: no-repeat; background-position: center; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="display-image-0"></div> <div class="display-image-1"></div><div class="display-image-2"></div> <div class="display-image-3"></div> 

Answer 1

我更改了第二个jQuery选择器，在其中将样式属性分配给$(this)并起作用。