So this is my slideshow div:
<div class="header">
<img name="slide" class="slide">
</div>
the css for it:
.slide{
width: 80%;
height: auto;
filter: brightness(90%);
}
and the javascript:
var i = 0;
var images = [];
var time = 4000;
images[0] = '1.png';
images[1] = '2.png';
images[2] = '3.png';
function changeImg() {
document.slide.src = images[i];
if (i < images.length -1) {
i++;
}
else
{
i = 0;
}
setTimeout("changeImg()", time);
}
window.onload = changeImg;
Now i want it to crossfade, currently its just switching the images very abruptly, but i want it smooth.
Any help?
You need to add opacity set to 0 on your css class, and then create a new class with opacity set to 1, that way you'll trigger the function to switch opacity after a specific time period has passed
<style>
.slide {
border: none;
opacity: 0;
position: absolute;
top: 0;
left: 0;
-webkit-transition: opacity 2s linear;
-moz-transition: opacity 2s linear;
-o-transition: opacity 2s linear;
transition: opacity 2s linear;
}
.visible {
opacity: 1;
}
</style>
<div class="header">
<img id="img0" class="slide visible" src="1.png">
<img id="img1" class="slide" src="2.png">
<img id="img2" class="slide" src="3.png">
</div>
<script>
var actual = 0;
var total = 3;
function addClass(elem, name) {
elem.className = elem.className + " " + name;
}
function deleteClass(elem, name) {
var c = elem.className;
elem.className = c.replace(name, "").replace(/ /g, " ").replace(/^ | $/g, "");
}
function nextImg() {
var e;
e = document.getElementById("img" + actual);
deleteClass(e, "visible");
actual++;
if (actual > total - 1) actual = 0;
e = document.getElementById("img" + actual);
addClass(e, "visible");
}
var slider = setInterval(nextImg, 4000);
</script>
While I like Joe's answer, here is one that uses JavaScript without adding or removing classes:
I gave the <img> an id for ease of reference here:
<img id='slideShow' name="slide" class="slide">
JavaScript:
function fadeImg(elem, total, step, speed){
step=step||5;
speed=speed||50;
var iter=0;
var fadeOutTime=(100/step)*speed;
var time=total;
var n = 0;
var opacity;
elem.src=images[n];
var fadeInterval=setInterval(function(){
time=time-speed;
opacity=iter/100;
if(time>fadeOutTime&&opacity<1){
iter=iter+step;
} else if(time<=fadeOutTime&&time>0&&opacity>0){
iter=iter-step;
} else if(time<=0){
n<images.length-1?n++:n=0;
elem.src=images[n];
time=total;
}
elem.style.opacity=opacity;
elem.style.filter= 'alpha(opacity=' +opacity*100 + ')';
},speed);
}
window.onload = fadeImg(document.getElementById('slideShow'),time);
I borrowed the interval concept from here: https://stackoverflow.com/a/2207751/6661052
Related
Already tried answer - jQuery Fade Images simultaneously
I have 2 divisions with 2 different images and i want them to load after i scroll down to that section, only 1 image is fading-in after i apply the same function to both images.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star11 = document.getElementById("star1");
opacity = Number(window.getComputedStyle(star11).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star11.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star22 = document.getElementById("star2");
opacity = Number(window.getComputedStyle(star22).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star22.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}
#star1{
opacity:0;
width:100px;
height:100px;
float:left;
}
#star2{
opacity:0;
width:100px;
height:100px;
float:right;
}
<div>
<img id="star1" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="star123">
</div>
<div>
<img id="star2" src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png" alt="123star">
</div>
P.S - I am new to JS/JQuery.
Thank You
You are declaring the function show twice. So ehat happens here is that the first function that you defined for the first star will be over written by the second function written for the second star and hence the styles for the second star only works. Function defenition is just like variable assigning. The variable name taks the latest value for which that is assigned and will neglect the previous values when define multiple times.
So what I suggest is to decalre the function only once and pass the id as a parameter.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn() {
setInterval(() => show('star1'), 200);
setInterval(() => show('star2'), 200);
}
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
#star1 {
opacity: 0;
width: 100px;
height: 100px;
float: left;
}
#star2 {
opacity: 0;
width: 100px;
height: 100px;
float: right;
}
<div>
<img
id="star1"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
</div>
<div>
<img
id="star2"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
Update
Handling scroll events.
I have refered this answer to prepare the javascript/jquery solution for scroll
$(document).ready(function () {
$(window).scroll(function () {
console.log("Scroll");
triggerScrollListner("star1");
triggerScrollListner("star2");
});
});
function triggerScrollListner(id) {
var hT = $(`#${id}`).offset().top,
hH = $(`#${id}`).outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > hT + hH - wH) {
setInterval(() => show(id), 200);
}
}
var opacity = 0;
var intervalID = 0;
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
body {
height: 1000px;
}
#star1 {
opacity: 0;
width: 100px;
height: 100px;
float: left;
}
#star2 {
opacity: 0;
width: 100px;
height: 100px;
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div>
<img
id="star1"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
</div>
<div>
<img
id="star2"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
More generic solution with multiple stars
Since there was only one row, the visualiztion is a little hard. In this example I have added multiple rows and have made a little bit more visual.
$(document).ready(function () {
$(window).scroll(function () {
triggerScrollListner("star1");
triggerScrollListner("star2");
triggerScrollListner("star3");
triggerScrollListner("star4");
});
});
function triggerScrollListner(id) {
var hT = $(`#${id}`).offset().top,
hH = $(`#${id}`).outerHeight(),
wH = $(window).height(),
wS = $(this).scrollTop();
if (wS > hT + hH - wH) {
setInterval(() => show(id), 200);
}
}
var opacity = 0;
var intervalID = 0;
function show(starId) {
var star = document.getElementById(starId);
opacity = Number(
window.getComputedStyle(star).getPropertyValue("opacity")
);
if (opacity < 1) {
opacity = opacity + 0.1;
star.style.opacity = opacity;
} else {
clearInterval(intervalID);
}
}
.star {
opacity: 0;
width: 100px;
height: 100px;
}
.container1, .container2 {
display: flex;
width: 100%;
flex-direction: column;
justify-content: space-between;
flex-direction: row;
}
.container2 {
margin-top: 1500px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container1">
<img
id="star1"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
<img
id="star2"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
<div class="container2">
<img
id="star3"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="star123"
/>
<img
id="star4"
class="star"
src="https://emojipedia-us.s3.dualstack.us-west-1.amazonaws.com/socialmedia/apple/271/star_2b50.png"
alt="123star"
/>
</div>
Just fiddled around into the code
Needed only 1 function and changed code in js only.
var opacity = 0;
var intervalID = 0;
window.onload = fadeIn;
function fadeIn()
{
setInterval(show, 200);
}
function show()
{
var star11 = document.getElementById("star1");
var star22 = document.getElementById("star2");
opacity =
Number(window.getComputedStyle(star22).getPropertyValue("opacity"));
opacity =
Number(window.getComputedStyle(star11).getPropertyValue("opacity"));
if (opacity < 1)
{
opacity = opacity + 0.1;
star11.style.opacity = opacity
star22.style.opacity = opacity
}
else
{
clearInterval(intervalID);
}
}
I have a slider with 3 images and 3 buttons which change the current image 'src' attribute (and hence change the current image), but now I want to add a smooth transition when I change the image and I would like to get this using css transitions.
So when I click on any bullet I need the current image fades out and then the new image fades in. how can I do this?
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Here is a CODEPEN
PD: I want to do this without Jquery.
CodePen sample
I've added some css transitions to the css
div#image-container {
opacity:1;
-webkit-transition: opacity 1s;
-moz-transition: opacity 1s;
transition: opacity 1s;
}
div#image-container.fade {
opacity:0;
}
and some function to handle the event:
var image = document.getElementById('image-container');
if(image.className === 'fade'){
image.className = '';
setTimeout(function(){
image.className = 'fade';
},1000)
}else{
image.className = 'fade';
setTimeout(function(){
image.className = '';
},1000)
}
setTimeout(function(){
bulletNumber = index;
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
},1000);
use CSS3 animation with add class in javascript
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
for (i = 0; i < listItemContainer.children.length; i++) {
(function(index) {
listItemContainer.children[i].onclick = function() {
bulletNumber = index;
imageChanger[0].className = "hide";
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber + 1) + '.png');
},501);
setTimeout(function(){
imageChanger[0].className = "show";
}, 1001);
}
})(i);
};
body {
text-align: center;
}
#carousel-index {
margin: 0;
padding: 0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
#image-container img.show {
animation: show .5s;
animation-fill-mode: both;
}
#keyframes show {
from {
transform:scale(0.7);
opacity:0
}
to {
transform: scale(1);
opacity:1
}
}
#image-container img.hide {
animation: hide .5s;
animation-fill-mode: both;
}
#keyframes hide {
from {
transform:scale(1);
opacity:1
}
to {
transform:scale(0.7);
opacity:0
}
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png" />
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
You can use CSS transition, and i guess that desired property is opacity.
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
} , 100);
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
Start image opacity should be 0, of course:
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
And then, on click (remove added class -> set opacity to 0 again), and add it again. You can play with values to get desired effect.
EDIT: fadeOut/fadeIn... it was little tricky, because of one container, and img src changing, but additional timeout solves it:
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img');
var bulletNumber;
imageChanger[0].classList.add('fadeIn');
for (i = 0; i < listItemContainer.children.length; i++){
(function(index){
listItemContainer.children[i].onclick = function(){
bulletNumber = index;
imageChanger[0].classList.remove('fadeIn');
imageChanger[0].classList.add('fadeOut');
setTimeout(function(){
imageChanger[0].classList.add('fadeIn');
imageChanger[0].classList.remove('fadeOut');
} , 1000);
setTimeout(function(){
imageChanger[0].setAttribute('src', 'https://civilian-interviewe.000webhostapp.com/img/mini_slider_' + (bulletNumber+1) + '.png');
} , 1000);
}
})(i);
};
body{
text-align:center;
}
#carousel-index{
margin:0;
padding:0;
}
#carousel-index li {
display: inline-block;
width: 2em;
height: 2em;
border-radius: 100%;
background-color: #666;
cursor: pointer;
}
img {
opacity:0;
}
img.fadeIn {
opacity:1;
transition:opacity 0.5s ease;
}
img.fadeOut {
opacity:0;
transition:opacity 0.5s ease;
}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index">
<li></li>
<li></li>
<li></li>
</ul>
</div>
P.S. Images should be probably preloaded, in order to all work fine on first load.
One more alternative, JS based, didn't change HTML or CSS (explanation as comments in the code):
var listItemContainer = document.getElementById('carousel-index');
var imageChanger = document.getElementById('image-container').getElementsByTagName('img')[0];
var newSrc, fadeDelta=-0.01; //don't change 'delta', change 'fadeoutDelay' and 'fadeinDelay'
(function initImageChanger(i,count){
imageChanger.style.opacity = 1; //set opacity in JS, otherwise the value returns "" (empty)
listItemContainer.children[i].onclick = function(){
var fadeoutDelay=5, fadeinDelay=15, opacity=parseFloat(imageChanger.style.opacity); //change delays to alter fade-speed
function changeSrc(){
var src = imageChanger.getAttribute('src');
var ext = src.substring(src.lastIndexOf('.')); //store extension
src = src.substring(0,src.lastIndexOf('_')+1); //store source up to the identifying number
return src+i+ext; //combine parts into full source
}
function fade(delay){
imageChanger.style.opacity = (opacity+=fadeDelta);
if (fadeDelta<0 && opacity<=0){ //fade-out complete
imageChanger.setAttribute('src',newSrc);
fadeDelta*=-1, delay=fadeinDelay; //invert fade-direction
} else if (fadeDelta>0 && opacity>=1){newSrc=null, fadeDelta*=-1; return;} //fade-in complete, stop function
setTimeout(function(){fade(delay);},delay);
}
//start fade, but only if image isn't already fading, otherwise only change source (and reset)
if (changeSrc() != imageChanger.getAttribute('src')){
newSrc=changeSrc();
if (opacity==0 || opacity==1){fade(fadeoutDelay);}
else if (fadeDelta>0){fadeDelta *= -1;} //reset fade for new source
}
};
if (++i < count){initImageChanger(i,count);} //iterate to next element
})(0,listItemContainer.children.length); //supply start-arguments
body {text-align:center;}
#image-container img {width:auto; height:150px;}
#carousel-index {margin:0; padding:0;}
#carousel-index li {display:inline-block; width:2em; height:2em; border-radius:100%; background-color:#666; cursor:pointer;}
<div id="image-container">
<img src="https://civilian-interviewe.000webhostapp.com/img/mini_slider_1.png"/>
<ul id="carousel-index"><li></li><li></li><li></li></ul>
</div>
codepen: http://codepen.io/anon/pen/xgwBre?editors=0010
It's not a perfect solution, but here's one way of doing it without jQuery:
First create a new function:
function fadeChange(element) {
var op = 0.1;
var timer = setInterval(function () {
if (op >= 1){
clearInterval(timer);
}
element.style.opacity = op;
element.style.filter = 'alpha(opacity=' + op * 100 + ")";
op += op * 0.1;
}, 10);
}
Then call that function when setting the new image:
fadeChange(imageChanger[0]);
This is demonstrated through the updated codepen here.
It's a bit clunky, but does fade the images. You may want to consider using a single image for the monitor, and then simply changing the contents of the monitor through this method.
I don't know why the if statement doesn't work.
<script>
var slideIndex = 0;
function slideShow(){
var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img');
images[slideIndex].classList.remove('show-slide');
if(slideIndex > images.length-1)
slideIndex = 0;
slideIndex++;
images[slideIndex].classList.add('show-slide');
setInterval(slideShow,2000);
}
slideShow();
</script>
I have 3 images in HTML .
The variable slideIndex goes up to 3 and stays at 3.
You shouldn't use classList as it isn't properly supported:
var slider = document.getElementById("slider");
var sliderIndex = 0;
function slide() {
for (var i = 0; i < slider.children.length; i++) {
var cls = slider.children[i].getAttribute("class").replace(/.show/ig, '');
slider.children[i].setAttribute("class", cls);
}
slider.children[sliderIndex].setAttribute(
"class",
slider.children[sliderIndex].getAttribute("class") + " show"
);
sliderIndex++;
if (sliderIndex > slider.children.length - 1) {
sliderIndex = 0;
}
}
slide();
setInterval(slide, 3000);
#slider {} #slider .slide {
position: absolute;
-moz-transition: all 1s linear 0s;
-o-transition: all 1s linear 0s;
-webkit-transition: all 1s linear 0s;
transition: all 1s linear 0s;
opacity: 0 !important;
filter: alpha(opacity=0) !important;
}
#slider .slide.show {
opacity: 1 !important;
filter: alpha(opacity=100) !important;
}
<div id="slider">
<img class="slide" src="http://placehold.it/310x150/E8117F/000000?text=1" />
<img class="slide" src="http://placehold.it/310x150/7812E5/000000?text=2" />
<img class="slide" src="http://placehold.it/310x150/128AE5/000000?text=3" />
<img class="slide" src="http://placehold.it/310x150/12E594/000000?text=4" />
<img class="slide" src="http://placehold.it/310x150/E5B412/000000?text=5" />
</div>
try this:
<script>
var slideIndex = 0;
function slideShow(){
var images= document.getElementsByClassName('slider-box')[0].getElementsByTagName('img');
images[slideIndex].classList.remove('show-slide');
slideIndex++;
if(slideIndex > images.length) slideIndex = 0;
images[slideIndex].classList.add('show-slide');
setInterval(slideShow,2000);
}
slideShow();
</script>
I would move cards on click and put them on the green table with animation of transition; then when cards are on the table, when i click on them, they must show their front face, and then return with back face.
The code doesn't work, i see the back cards on the left of the page but when i click on nothing happens.
var card_value = ['1B', '2B', '3B', '4B', '5B', '6B'];
var card_left = [];
var card_top = [];
for (i = 0; 1 & lt6; i++) {
card_left = 70 + 100 * (i % 4);
card_top = 15 + 120 * Math.floor(i / 4);
}
var started = false;
function moveToPlace(id) {
var el = document.getElementById("card_" + id);
el.style["z-index"] = "1000";
el.style["left"] = card_left[id] + "px";
el.style["top"] = card_top[id] + "px";
el.style["z-index"] = "0";
}
function hideCard(id) {
var el = document.getElementById("card_" + id);
el.firstChild.src = "http://placehold.it/100x150/44F/000.png&text=Back";
el.style["WebkitTransform"] = "scale(1.0)";
}
$(".table div").click(function() {
if (started) {
var el = document.getElementById("card_" + id);
el.firstChild.src = card_value[id] + ".gif";
el.style["WebkitTransform"] = "scale(1.2)";
setTimeout("hideCard(" + id + ")", 1000);
} else {
card_value.sort(function() {
return Math.round(Math.random()) - 0.5;
});
for (i = 0; i < 6; i++) {
setTimeout("moveToPlace(0" + i + ")", i * 100);
}
started = true;
}
})
.page {
border: 1px solid #ccc;
perspective: 1000;
}
.table {
position: relative;
margin: 0 0 0 200px;
height: 500px;
background: green;
}
.table div {
position: absolute;
left: -140px;
top: 100px;
-moz-transition: 0.5s ease-in-out;
-o-transition: 0.5s ease-in-out;
transition: 0.5s ease-in-out;
-webkit-transition-property: left, top, -webkit-transform;
-webkit-transition-duration: 0.5s;
-webkit-transition-timing-function: ease-out, ease-out, ease-in-out;
}
<body>
<div class="page">
<div class="table">
<div id="card_00">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_01">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_02">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_03">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_04">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
<div id="card_05">
<img width="100" height="150" src="http://placehold.it/100x150/44F/000.png&text=Back">
</div>
</div>
</div>
</body>
I am trying to rotate the background image of a div with jquery. It works fine but the content within the div disappears when the image rotates. How can i prevent the content from disappering and make it such the it is always present:
Code:
jQuery(document).ready(function($) {
$(window).load(function() {
var i =0;
var images = ['http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png','http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png'];
var image = $('#slideit');
image.css('background-image', 'url(http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png)');
setInterval(function(){
image.fadeOut(1000, function () {
image.css('background-image', 'url(' + images [i++] +')');
image.fadeIn(1000);
});
if(i == images.length)
i = 0;
}, 5000);
})
});
Fiddle HERE
You can make it like this http://jsfiddle.net/frzssoyw/3/
<div id="slideit">
<div id="slideit-bg"></div>
<div id="slideit-content">
some content
</div>
</div>
You can use position: absolute; on images.
I edited your JSFiddle using position: absolute;.
HTML:
<div id="slideit" style="width:700px;height:391px;">
<div class="slideit-content">some content</div>
<img class="img-rotate active" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image2.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image3.png" />
<img class="img-rotate" src="http://dl.dropboxusercontent.com/u/96099766/ChangeBackgroundJQuery/image1.png" />
</div>
CSS:
.img-rotate {
position: absolute;
top: 0;
left: 0;
width: 700px;
height: 391px;
opacity: 0;
z-index: 0;
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
transition: opacity 1s linear;
}
.img-rotate.active {
opacity: 1;
}
.slideit-content {
z-index: 10;
position: relative;
}
JS:
jQuery(function($) {
var i = 0,
image = $('#slideit'),
images = image.find(".img-rotate"),
images_count = images.length,
next_image;
setInterval(function(){
i = (i+1) % images_count;
next_image = images.eq(i);
images.filter(".active").removeClass("active");
next_image.addClass("active");
}, 5000);
});