Help with Jquery image rotator

Posted on 2011-10-24
Last Modified: 2012-06-21
On the right side of my page I have an image rotator:

When the page first loads, the first time the rotator changes pictures, the background image doesn't go away. Does anyone know what I'm doing wrong here?

My Javascript code is attached.

function theRotator() {
	//Set the opacity of all images to 0
	$('div#rotator ul li').css({opacity: 0.0});
	//Get the first image and display it (gets set to full opacity)
	$('div#rotator ul li:first').css({opacity: 1.0});
	//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds

function rotate() {	
	//Get the first image
	var current = ($('div#rotator ul')?  $('div#rotator ul') : $('div#rotator ul li:first'));

	//Get next image, when it reaches the end, rotate it back to the first image
	var next = (( ? (('show')) ? $('div#rotator ul li:first') : $('div#rotator ul li:first'));	
	//Set the fade in effect for the next image, the show class has higher z-index
	next.css({opacity: 0.0})
	.animate({opacity: 1.0}, 1000);

	//Hide the current image
	current.animate({opacity: 0.0}, 1000)

$(document).ready(function() {		
	//Load the slideshow

Open in new window

Question by:elliottbenzle
    1 Comment
    LVL 76

    Accepted Solution

    I'm not seeing what you mean.

    In Firefox 7 it looks fine.  In IE8 I see a blue border.  Is that the background you mean?

    Featured Post

    Highfive Gives IT Their Time Back

    Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

    Join & Write a Comment

    Suggested Solutions

    Introduction The Google Maps API offers various ways to draw dynamic and static maps.  Using a combination of PHP and JavaScript, you can draw active JavaScript maps that allow pan-and-zoom in the client browser window.  You can also draw "static" …
    Someone recently asked me about how to display a progress indicator on a page while an iframe is loading. And I remember when I first came across this myself. It was a bit tricky to get my head around, but really, it's very simple. The most impor…
    In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
    In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

    745 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now