Question

The fade effect here isn’t working…. ui.fadebox is a white div tag that is supposed to fade in and fade out. It’s not fading though, even when the time is set to 5000 it’s just like setting the display from block/none. There’s no transitioning…

            ui.fadeBox.animate({
                    opacity: 1
                },
                500,
                function () {
                    $('.active', ui.container).removeClass('active');

                    $(ui.banners[idx]).addClass('active');

                    ui.fadeBox.animate({
                        opacity: 1
                    },
                    500,
                    function () {
                        ui.fadeBox.css("display", "none");
                    });
            });

Answer 1

You never set the opacity to 0. You only ever animate it to 1.

In other words, you are animating from opacity 1->1, and then half a second later animating from 1->1, and then half a second later making it disappear. So, it stays visible for 1 second, and then it blinks away.

You need to make the second opacity 0, and make it start from 0.

Simplified example:

http://jsfiddle.net/ZYmHP/

Another:

http://jsfiddle.net/ZYmHP/1/