Simple jquery .css background change image with delay [closed]

Question

Closed. This question needs details or clarity. It is not currently accepting answers.

Want to improve this question? As written, this question is lacking some of the information it needs to be answered. If the author adds details in comments, consider editing them into the question. Once there's sufficient detail to answer, vote to reopen the question.

Closed 11 years ago.

Improve this question

I want to change the background on time with jquery, in my welcome_box div.

<div class="welcome_box">
        <p>test</p>
        <small>text</small>
    </div>
</div>

I dont need clicks or anything just automatic fadeIn for around 4 images, with a delay of 5 seconds for each image to fadeIn

I cant find a simple code, can anyone help me with this?

Thanks in advance.

You can't fade background images unless you fade the whole div. You'll need an image (or element displaying an image) inside the div as well. — Reinstate Monica Cellio
– Reinstate Monica Cellio, Commented Mar 10, 2014 at 13:45
I want the bankground of the div change every 5 seconds, i need simple code for this. i hope you know something that will work easy — user3313356
– user3313356, Commented Mar 10, 2014 at 13:48
stackoverflow.com/questions/18269784/… stackoverflow.com/questions/11918986/… — mbouzahir
– mbouzahir, Commented Mar 10, 2014 at 13:48
Missed part of title referring to background. As Archer said it, you can't apply effect to image background, you should rethink your logic then — A. Wolff
– A. Wolff, Commented Mar 10, 2014 at 13:50

Jack Shultz · Accepted Answer · 2014-03-10 14:04:39Z

Your markup is invalid. Try this instead

<div class="welcome_box">
    <div>
        <p>test</p>
        <small>text</small>
    </div>
</div>

Now you can achieve this with either CSS or Javascript. For CSS you could use a keyframe animation. You may need to play with the percentages and the timing. I figure 5s x 4 images so I put 20s but I'm not sure if you want to stay longer on each image and make the transition 5s.

.welcome_box div
{
animation: myfirst 20s;
-webkit-animation: myfirst 20s; /* Safari and Chrome */
}

@keyframes myfirst
{
0%   {background: url(image_1) 0 0 no-repeat; opacity:1;}
9%  {background: url(image_1) 0 0 no-repeat; opacity:0;}
18%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
36%  {background: url(image_2) 0 0 no-repeat; opacity:1;}
45%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
54% {background: url(image_3) 0 0 no-repeat; opacity:0;}
63% {background: url(image_3) 0 0 no-repeat; opacity:1;}
72%  {background: url(image_3) 0 0 no-repeat; opacity:0;}
81%  {background: url(image_4) 0 0 no-repeat; opacity:0;}
90% {background: url(image_4) 0 0 no-repeat; opacity:1;}
99% {background: url(image_4) 0 0 no-repeat; opacity:0;}
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
0%   {background: url(image_1) 0 0 no-repeat; opacity:1;}
9%  {background: url(image_1) 0 0 no-repeat; opacity:0;}
18%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
36%  {background: url(image_2) 0 0 no-repeat; opacity:1;}
45%  {background: url(image_2) 0 0 no-repeat; opacity:0;}
54% {background: url(image_3) 0 0 no-repeat; opacity:0;}
63% {background: url(image_3) 0 0 no-repeat; opacity:1;}
72%  {background: url(image_3) 0 0 no-repeat; opacity:0;}
81%  {background: url(image_4) 0 0 no-repeat; opacity:0;}
90% {background: url(image_4) 0 0 no-repeat; opacity:1;}
99% {background: url(image_4) 0 0 no-repeat; opacity:0;}
}

The other route using javascript, there are many options but the easiest thing to do is use an existing carousel plugin. This was the first one I found that had automatic fadein http://malsup.com/jquery/cycle/int2.html

If you use the carousel example then you need to style your text using position:absolute; and z-index:1 or greater so it is on a layer above the image. If you use the CSS approach the background image is on a layer below the text.

Anoop Joshi P · Accepted Answer · 2014-03-10 15:14:55Z

0

Try like this

var i=0;
setInterval(function(){

 $('.welcome_box').css("background-image","url('images/pic"+i+".jpg')");
 $('.welcome_box').fadeToggle();
 i++;
 if(i==4)
 {
    i=0;
}
},5000);

keep the image names like pic1, pic2..etc like that

edited Mar 10, 2014 at 15:14

answered Mar 10, 2014 at 13:48

Anoop Joshi P

25.6k9 gold badges35 silver badges54 bronze badges

9 Comments

user3313356 Over a year ago

code isnt working, trying to figure out

Jack Shultz Over a year ago

How does the i value iterate here?

Anoop Joshi P Over a year ago

@user3313356 is this you are looking for?

user3313356 Over a year ago

its works! but with a fadeIn and out it would be perfect;)

user3313356 Over a year ago

@AnoopJoshi how can we make it switch with an animation? thanks

|

Collectives™ on Stack Overflow

Simple jquery .css background change image with delay [closed]

2 Answers 2

1 Comment

9 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

9 Comments

Linked

Related