Question

I have the following code:

<div id="slideshow" >
    <div class="check">
        <img src="images/slideshow/image01.jpg" alt="Slideshow Image 1" />
    <p>Some paragraph</p>
    </div>    
    <div>
        <img src="images/slideshow/image02.jpg" alt="Slideshow Image 2" />
        <p>Some paragraph</p>
    </div>
    <div>
        <img src="images/slideshow/image03.jpg" alt="Slideshow Image 3" />
        <p>Some paragraph</p>
    </div>
</div>

I found this slideshow method that uses the following code to fade DIVs in and out over each other to create a sort of image slideshow::

function slideSwitch() {

var $active = $('#slideshow DIV.check');

if ( $active.length == 0 ) $active = $('#slideshow DIV:last');

var $next =  $active.next().length ? $active.next()
    : $('#slideshow DIV:first');

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

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

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

As you can see, it adds the class “check” which fades in the DIV. What I’m trying to do is check with Jquery when the slideSwitch function has added the class “check” to the Div, and then do something. I’ve tried this, but it doesn’t work:

if ($("#slideshow > div:nth-child(2)").hasClass('check')) {
    $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);
} else {
//Do nothing
} 

It works if I just check for the 1st child or if I just add this (probably because it already has the class defined in the HTML code):

if ($("#slideshow DIV").hasClass... etc

But then the animation starts right away, when what I really want is for it to start right after the 2nd DIV has had the class “check” assigned in JavaScript. Please help!!!!!

Answer 1

The class is added immediately when called in your code above. Why not include your animation there?

$next.delay(2000)
    .css({opacity: 0.0})
    .addClass('check')
    .animate({opacity: 1.0}, 1000, function() {
        $active.removeClass('check last-active');
        $("#slideshow > div:nth-child(2)").animate({marginTop: "-50px"}, 5000);

    });
}