Why won't my getElementById.style.display work?

Question

As you can see, I've reached the point where I just throw my code at the editor hoping for something to workout, but it looks like the code just refuses to answer to my commands.

What that is happening when I'm running the code is that only one of the two images (sometimes image1, sometimes image2) fadeout and then fadein again without a change, and the other image never show up. I've tried to use .attr of JQuery - didn't work as well.

I am sleepy at the moment, so I hope it's a stuiped one, due I've searched and nothing I found so far helped me.

I hope you guys can somehow figure this one out for me just this one time, Thanks in advance.

EDIT:

All you offered realy did help, but now it runs only once and after it finished with its first cycle the slideshow start acting strange... it does fadeIn/fadeOut only half of the time, somtimes it doesn't even show one of the pictures, then, in the next cycle it does show the missing pictures.

I guess the problem is that I put the whole thing inside a 'for loop'.

it ran only once (on a asp.NET page it ran auto in loops but on PHP page i don't know how to make it run in loops so I did the 'for loop') I hope and guess it is not the right solution, and that you can offer a better one.

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000);
document.getElementById('bigPicture1').style.display = 'none';
document.getElementById('bigPicture2').style.display = 'block';
$('#bigPicture2').animate({opacity: '1'}, 1000);
$('#bigPicture2').delay(5000).animate({opacity: '0'}, 1000);
document.getElementById('bigPicture2').style.display = 'none';
document.getElementById('bigPicture1').style.display = 'block';
$('#bigPicture1').animate({opacity: '1'}, 1000);

/*->->-> The new described code <-<-<-*/

$(document).ready(function(){
        for(c = 0; c < 10000; c++)
        {
            $('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function() {
                document.getElementById('bigPicture1').style.display = 'none';
                document.getElementById('bigPicture2').style.display = 'inline-block';
                $('#bigPicture2').animate({opacity: '1'}, 1000, function(){

                    $('#bigPicture2').delay(5000).animate({opacity: '0'}, 1000, function() {
                        document.getElementById('bigPicture2').style.display = 'none';
                        document.getElementById('bigPicture1').style.display = 'inline-block';
                        $('#bigPicture1').animate({opacity: '1'}, 1000);
                    });
                });
            });
        }
    });

Answer 1

It looks like you want to assign the styles after your animation did finish, right?

In that case you can pass a third parameter (callback-function) to .animate() like that:

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function(){
  // do stuff after bigPicture1 has an opacity of 0
  $('#bigPicture2').css({opacity: 0, display: 'block'}).animate({opacity: '1'}, 1000, function(){
    // and so on..
  });
});

Here you will find further information

Answer 2

.animate(...) is asynchronous. (You must use callbacks this time)

Combining this idea with Ganesh's :

$('#bigPicture1').animate({opacity: '0'}, 1000, function(){ $('#bigPicture1').hide(); $('#bigPicture2').css('display','block'); $('#bigPicture2').animate({opacity: '1'}, 1000, function(){ $('#bigPicture2').animate({opacity: '0'}, 1000, function(){ $('#bigPicture2').hide(); $('#bigPicture1').css('display','block'); $('#bigPicture1').animate({opacity: '1'}, 1000); ); ); );

Answer 3

You can use callback functions for your animation to make sure the second image is not displayed before the first image is hidden.

This will only run once but you can modify it to call itself after completion to make run continuously.

jsFiddle example

$(function () {
    $('#bigPicture1').delay(5000).animate({
        opacity: '0'
    }, 1000, function () {
        $('#bigPicture1').hide();
        $('#bigPicture2').show();
        $('#bigPicture2').animate({
            opacity: '1'
        }, 1000, function () {
            $('#bigPicture2').delay(5000).animate({
                opacity: '0'
            }, 1000, function () {
                $('#bigPicture2').hide();
                $('#bigPicture1').show();
                $('#bigPicture1').animate({
                    opacity: '1'
                }, 1000);
            });
        });
    });
});

Answer 4

The reason is that you have a timeout set on the jQuery calls (one for 5 sec) and so the code that comes after the jQuery call executes before the animation. This is what you need:

$('#bigPicture1').delay(5000).animate({opacity: '0'}, 1000, function() {
    document.getElementById('bigPicture1').style.display = 'none';
    document.getElementById('bigPicture2').style.display = 'block';
});

That will add the callback to make it execute the styling code after the animation is done.

Answer 5

You are using jQuery so it would be best to utilize it to the fullest:

$('#bigPicture1').hide();
$('#bigPicture2').show();

Instead of:

document.getElementById('bigPicture1').style.display = 'none';
document.getElementById('bigPicture2').style.display = 'block';