jquery or javascript div background image change

I have a problem in site that I build.I search google and stackoverflow but I can't find anything that could help me.I have one div with content search engine,text etc...and I have background image.So can you tell me how to change div background image every like 2-3 second or whatever i set with fade effect, and please I'm noob with jquery or javascript so be a patient.Thank you.

Answers


html code

    <div id="banner">

  <img class="img1" height="251" width="650" alt="img1" src="images/banner1.jpg"/>

  <img class="img2" height="251" width="650" alt="img2" src="images/banner2.jpg"/>

</div>

jquery code

 jQuery.timer = function (interval, callback)
 {

 var interval = interval || 100;

if (!callback)
    return false;

_timer = function (interval, callback) {
    this.stop = function () {
        clearInterval(self.id);
    };

    this.internalCallback = function () {
        callback(self);
    };

    this.reset = function (val) {
        if (self.id)
            clearInterval(self.id);

        var val = val || 100;
        this.id = setInterval(this.internalCallback, val);
    };

    this.interval = interval;
    this.id = setInterval(this.internalCallback, this.interval);

    var self = this;
};

return new _timer(interval, callback);
};

var current_panel = 2;
var animation_duration = 2500;  
$.timer(6000, function (timer) {  
    switch(current_panel){  
        case 1:  
           $("#banner .img1").fadeIn(800);

           $("#banner .img2").fadeOut(800);
            current_panel = 2; 
        break; 
        case 2: 
            $("#banner .img2").fadeIn(800);

             $("#banner .img1").fadeOut(800);
            current_panel = 1; 
        break; 

        timer.reset(12000);  
     }  
 });  

As far as I know, there is no way to change background images with fade effects without additional markup. You didn't provide any code, so I've made a synthetic example.

Markup:

<div class="container">
    <div class="bg">
    </div>
    <div class="content">
        ... 
    </div>
</div>
...

CSS:

/*
    this is your main container 
*/
.container {
    width:300px;
    height:300px;
}

/*
    this one is needed to provide 
    independent background, when it fades
    your content will still be available for seeing
*/
.bg {
    width:300px;
    height:300px;
    background-color:yellow;
    z-index:0;
}

/*
    your content, obviously :)
*/
.content {
    position:relative;
    top:-300px;
    z-index:1;
    padding:5px; /*just for better looking*/
}

And some jquery:

//in your case, here must be URLs for images
var arr = ["yellow", "blue", "green", "red"]; 
var i = 0;

var intervalID = setInterval(function() {
    //when bg fades, we don't want to see  
    //transparent background                             
    $('.container').css('background-color', arr[i]); 

    //make transparent, change background, make visible again
    $('.bg').animate({opacity: 0}, 'slow', function() {
        $(this).css({'background-color': arr[i]}).animate({opacity: 1});
    });

    //this can be random
    i++;
    if (i >= arr.length)
        i = 0;
}, 2000); //change 2000 if you want different time between changes


//this one is illustating, how to stop background loop
//with "clearInterval". You might want to use it on :hover or smth like that
setTimeout(function(){
    clearInterval(intervalID);
    }, 20000);

It's not very flexible solution, because you need to know exact size of the elements, but I don't think you'll use images of different sizes for background.

p.s. Working example - http://jsfiddle.net/7xVAu/115/

Hope this helped.


You can start here at the JQuery docs. If you don't understand that stuff try looking for some good javascript or JQuery books. Also codecademy is very helpful for beginner programmers.


Need Your Help

Access Datasheet view appears to be blank(charaters appear in white hence not visible) in WSS3.0

ms-access wss

Access Datasheet view appears to be blank(charaters appear in white hence not visible) in WSS3.0

Three.js video textures and the GPU

html5-video three.js webgl gpu

I can load HTML 5 video elements on a page, map them to THREE.Texture's, and display video textures on cubes with MeshBasicMaterial in 3d. (All the videos are set to autoplay and loop. )

About UNIX Resources Network

Original, collect and organize Developers related documents, information and materials, contains jQuery, Html, CSS, MySQL, .NET, ASP.NET, SQL, objective-c, iPhone, Ruby on Rails, C, SQL Server, Ruby, Arrays, Regex, ASP.NET MVC, WPF, XML, Ajax, DataBase, and so on.