Is the background image slowly disappearing?

Question

Is the background image slowly disappearing?

Instead of using the background property for a background image, I have opted for a different style. Here is how I implemented it:

<div id="bg">
    <img id="bgChange" src="image/image.jpg" />
</div>

This is the corresponding CSS code:

#bg {
  position: fixed; 
  top: -50%; 
  left: -50%; 
  width: 200%; 
  height: 200%;
}
#bg > div {
  position: absolute ; 
  top: 0; 
  left: 0; 
  right: 0; 
  bottom: 0; 
  margin: auto; 
  min-width: 50%;
  min-height: 50%;
}

To dynamically change the image source, I used this simple JavaScript function:

var imageRotating = document.getElementById("bgChange");
var i = 0;
setInterval(function imageRotator() {
    imageRotating.setAttribute("src", "image/image" + ++i + ".jpg");
    if (i == 3) { i = -1; }
}, 5000);

Now my question is: How can I incorporate the .fadeOut() method in this script using jQuery? Since I am new to jQuery, I would appreciate a detailed explanation.

javascript jquery html css

Answer 1

Answer №1

Let me show you my approach

HTML

<div id="bg">
    <img src="image/image1.jpg" class="shown" />
    <img src="image/image2.jpg" />
    <img src="image/image3.jpg" />
</div>

CSS:

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 200%; 
  height: 200%;
}
#bg img{
  position: fixed; 
  top: 0; 
  left: 0; 
    display: none;
    width: 300px;
    height: 300px;
}
#bg img.shown{
    display: block;
}

JavaScript:

setInterval(function imageRotator() { $("#bg img.shown").fadeOut("slow", function(){ $(this).removeClass("shown"); });

    if ($("#bg img.shown").next("img").length > 0) // if there is an image after this one
    { 
        $("#bg img.shown").next("img").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
    else
    {
        $("#bg img:first-child").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
}, 2000);

EDIT:

Made a few small fixes. Here's a working fiddle

http://jsfiddle.net/k40rcpbf/

You had some CSS rules to govern divs within #bg but your HTML didn't have any

Answer 2

Let me show you my approach

HTML

<div id="bg">
    <img src="image/image1.jpg" class="shown" />
    <img src="image/image2.jpg" />
    <img src="image/image3.jpg" />
</div>

CSS:

#bg {
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 200%; 
  height: 200%;
}
#bg img{
  position: fixed; 
  top: 0; 
  left: 0; 
    display: none;
    width: 300px;
    height: 300px;
}
#bg img.shown{
    display: block;
}

JavaScript:

setInterval(function imageRotator() { $("#bg img.shown").fadeOut("slow", function(){ $(this).removeClass("shown"); });

    if ($("#bg img.shown").next("img").length > 0) // if there is an image after this one
    { 
        $("#bg img.shown").next("img").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
    else
    {
        $("#bg img:first-child").fadeIn("slow", function(){ $(this).addClass("shown"); });
    }
}, 2000);

EDIT:

Made a few small fixes. Here's a working fiddle

http://jsfiddle.net/k40rcpbf/

You had some CSS rules to govern divs within #bg but your HTML didn't have any

Answer 3

Answer №2

Following the setInterval

$( "#bgChange" ).fadeOut( "slow", function() {
  // ...
});

Edit: Let me clarify.

You need to have at least 2 images in your code. Please note that the code provided is untested and is simply meant to inspire you.

<div id='phototab'>
<img class=active_img src="picture1.png">
<img src="picture2.png">
</div>
<script>
function changePhoto(){
 var current_img=$("#phototab .active_img");
 var next_img=curent_img.next();
    curent_img.fadeOut( "slow", function() {
      current_img.removeClass('active_img');
      next_img.addClass('active_img');
    });
}
setInterval('changePhoto()', 1000);

</script>

Answer 4

Following the setInterval

$( "#bgChange" ).fadeOut( "slow", function() {
  // ...
});

Edit: Let me clarify.

You need to have at least 2 images in your code. Please note that the code provided is untested and is simply meant to inspire you.

<div id='phototab'>
<img class=active_img src="picture1.png">
<img src="picture2.png">
</div>
<script>
function changePhoto(){
 var current_img=$("#phototab .active_img");
 var next_img=curent_img.next();
    curent_img.fadeOut( "slow", function() {
      current_img.removeClass('active_img');
      next_img.addClass('active_img');
    });
}
setInterval('changePhoto()', 1000);

</script>

Is the background image slowly disappearing?

Answer №1

Answer №2

Similar questions

Tips on utilizing the .ashx file for running scripts upon a webpage closing by a user

Align the font-awesome icon in the middle of the input box vertically

Unused DIV elements in jQueryUI are identified using XSLT

Is OnPush Change Detection failing to detect state changes?

Can Three.js be used to create a compact canvas?

Cross-browser compatibility issue: Chrome displays image class in HTML CSS, while Firefox does not

Is it possible to implement a single OrbitControls with two cameras in ThreeJS?

Using CSS3 translate will result in children becoming relatively positioned

What is a clever way to monitor the completion of a forEach loop using promises?

Updating select dropdown options dynamically with the help of jQuery AJAX

Slot context remains unclaimed

Bring google map markers to life with animation

Adding rows to a Datatable using an object array in rows.add()

Basic AngularJS framework with minimal external dependencies

Why won't the state change when using Angular's ui-router $state.go method?

Are there any solutions for the malfunctioning v8 date parser?

Using a conditional statement in JavaScript, create a mapping between the values in an array and string

No JavaScript needed for this CSS framework

Library or theme with CSS that does not require the use of HTML classes

Having difficulty making changes to specific category fields in Magento 1.6