I've got some li's, each with an image inside. The first three are visible and the rest are hidden. What I want to do is to hide one of the visible images (a random one - that bit works..), replace the image with one of the hidden ones and display it again, but I can't seem to get it visible again. Here's the codepen: http://codepen.io/anon/pen/sBvkC
HTML:
<ul>
<li class="imageIn"><img src="http://placehold.it/300x200" /></li>
<li class="imageIn"><img src="http://placehold.it/300x200" /></li>
<li class="imageIn"><img src="http://placehold.it/300x200" /></li>
<li class="imageOut"><img src="http://placehold.it/300x200" /></li>
<li class="imageOut"><img src="http://placehold.it/300x200" /></li>
</ul>
CSS:
* { margin: 0; padding: 0; }
ul { list-style-type: none; width: 100%; }
li { width: 33%; display: inline-block; }
img { width: 100%; }
.imageOut { display: none; }
.hidden { visibility: hidden; }
.visible { visibility: visible; }
JS:
window.setInterval(function(){swapImage()},1000);
function swapImage() {
/* select random image that is currently displayed */
ins = $('.imageIn > img');
var imageDisplayed = $(ins[Math.floor(Math.random()*ins.length)]);
/* select random image that is NOT currently displayed */
outs = $('.imageOut > img');
var imageNotDisplayed = $(outs[Math.floor(Math.random()*outs.length)]);
/* switch displayed image to visibility:hidden */
$(imageDisplayed).css("visibility", "hidden");
/* SWAP src of imageDisplayed with that of imageNotDisplayed */
var srcDisplayed = $(imageDisplayed).attr("src");
var srcNotDisplayed = $(imageNotDisplayed).attr("src");
$(imageDisplayed).attr("src") = srcNotDisplayed;
$(imageNotDisplayed).attr("src") = srcDisplayed;
/* switch to visibility:visible */
$(imageDisplayed).css("visibility", "visible");
}
What am I doing wrong?