jQuery animation fade effect

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");
                    });
            });

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/

To make it fade in, set the opacity to 0 before the animation.
(By calling ui.fadebox.css('opacity', 0))

To make it fade out, change the inner opacity: 1 to 0.