Avatar of slightlyoff
slightlyoff
 asked on

jQuery Animation

I have a slide show i'm trying to customize that will change the delay time depending on the ID of the image that's active.

It's not working.  Right now, the image delay time doesn't change.  Also, the images change, but they blink, they don't transition smoothly, like they did before i customized the code.  not sure why.

I've attached the jQuery i'm using, along with the html for the div the slideshow is in.

Thanks for your help!!!
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js"></script>
<script type="text/javascript">

var delayTime = 1000;

function slideSwitch() {
    var $active = $('#slideshow DIV.active');
    
   
	if ( $active.length == 0 ) $active = $('#slideshow DIV:last');
    
	var d = $('#slideshow DIV.active img' ).attr('id')
	
	if (d == 'a' || d == 'b' || d == 'c' || d == 'z'){
		delayTime = 1000;	
	} else {
		delayTime = 5000;	
	}
	
    var $next =  $active.next().length ? $active.next()
        : $('#slideshow DIV:first');

    $active.addClass('last-active');

    $next.css({opacity: 0.0})
        .addClass('active')
        .animate({opacity: 1.0}, 2000, function() {
            $active.removeClass('active last-active');
        });
}


$(function() {
    setInterval( "slideSwitch()", delayTime );
});


</script>


<div id="slideshow">
                                                  <div class="active"><img id="z" src="images/rentals/D1.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="a" src="images/rentals/D2.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="b" src="images/rentals/D3.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="c" src="images/rentals/D4.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="d" src="images/rentals/D4.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="e" src="images/rentals/01.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="f" src="images/rentals/02.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="g" src="images/rentals/03.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="h" src="images/rentals/04.jpg" alt="" width="445" height="240" /></div>
                                                  <div><img id="i" src="images/rentals/05.jpg" alt="" width="445" height="240" /></div>
                                                </div>

Open in new window

JavaScript

Avatar of undefined
Last Comment
slightlyoff

8/22/2022 - Mon
ASKER CERTIFIED SOLUTION
Michel Plungjan

Log in or sign up to see answer
Become an EE member today7-DAY FREE TRIAL
Members can start a 7-Day Free trial then enjoy unlimited access to the platform
Sign up - Free for 7 days
or
Learn why we charge membership fees
We get it - no one likes a content blocker. Take one extra minute and find out why we block content.
Not exactly the question you had in mind?
Sign up for an EE membership and get your own personalized solution. With an EE membership, you can ask unlimited troubleshooting, research, or opinion questions.
ask a question
slightlyoff

ASKER
Perfect!  Thank you for your help!!!
Your help has saved me hundreds of hours of internet surfing.
fblack61