jQuery 仅当 slider div 活动时才动画

Question

here is the code: http://jsfiddle.net/duNHJ/2/

Basically there is an animations every div so when I click next or prev slider that animation script shoud run only when activated div. Currently it animates all of them at the beginning.

using http://www.malsup.com/jquery/cycle/

Also how can add active class on activated div?

Answer 1

I wasn't too sure what you wanted with regards to your first concern, however with regards to adding/remove an active state class, see the following example:

http://jsfiddle.net/duNHJ/27/

Answer 2

Any script will simply be run as soon as it is loaded. Also, with the selector $('.test') , the animation will be run on all elements with class test . You want to animate when the div changes. The jQuery Cycle Plugin provides callback methods to do this:

$('#example').cycle({ 
    fx:     'scrollLeft', 
    timeout: 5000, 
    before:  onBefore, 
    after:   onAfter 
});

Where the function onBefore() is called before the transition, and onAfter() is called after. In your case, just use onAfter() (and get rid of the inline scripts):

function onAfter() {
    // $(this) references the current slide
    $(this).animate({
        top: "100px"
    }, 1000);
}

$('#s6').before('<div id="nav">').cycle({
    fx: 'fade',
    timeout: 6000,
    delay: -2000,
    pager: '#nav',
    next: '#next2',
    prev: '#prev2',
    activePagerClass: 'activeSlide',
    after: onAfter
});

Demo: http://jsfiddle.net/jtbowden/cmwc3/

I am not sure exactly what animation you want to happen, but this should get you started.