jquery - 仅当滑块 div 处于活动状态时 jQuery 动画

Question

这是代码：http: //jsfiddle.net/duNHJ/2/

基本上每个 div 都有一个动画，所以当我单击下一个或上一个滑块时，动画脚本应该只在激活 div 时运行。目前，它在一开始就为所有这些设置动画。

使用http://www.malsup.com/jquery/cycle/

另外如何在激活的 div 上添加活动类？

Answer 1

关于您的第一个问题，我不太确定您想要什么，但是关于添加/删除活动状态类，请参见以下示例：

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

Answer 2

任何脚本都将在加载后立即运行。此外，使用 selector $('.test')，动画将在所有具有 class 的元素上运行test。您想在 div 更改时制作动画。jQuery Cycle Plugin 提供了回调方法来做到这一点：

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

函数onBefore()在转换之前onAfter()调用，之后调用。在您的情况下，只需使用onAfter()（并摆脱内联脚本）：

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

演示：http: //jsfiddle.net/jtbowden/cmwc3/

我不确定你想要发生什么动画，但这应该让你开始。