Check when Jquery has assigned a class, then do something

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!!!!!

"it adds the class "check" which fades in the DIV". It's not the adding of the class that fades in the div, it's the opacity animation that does. — j08691, May 07 '12 at 15:00
@j08691 Yes, sorry my bad, but still, it doesn't change what I need to do. bPratik, I'll take a look at that. — antigaprime, May 07 '12 at 15:37
Do you want to perform the check before the animation begins, or after it ends? — j08691, May 07 '12 at 15:51

Patrick Moore · Accepted Answer · 2012-05-07T15:43:13.917

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

    });
}

edited May 07 '12 at 15:43

answered May 07 '12 at 15:00

Patrick Moore

13,251
5
38
63

That's interesting, but I don't want it to animate on the next slide that's firing; I need it to animate on the exact 2nd DIV, that way if I decide to add more DIVs before the 2nd I can just change the selector. But thanks anyway. – antigaprime May 07 '12 at 15:31
Gotchya, well just replace back and it ought to fire when you need - see updated above :) – Patrick Moore May 07 '12 at 15:42
Yup, that did the trick. I actually should have realized earlier that I could have just changed the selector. – antigaprime May 07 '12 at 16:02

Check when Jquery has assigned a class, then do something

1 Answers1