Question

我有2个带有trislider类的容器div，每个div都有一个div，它应该在某个位置设置动画。

html是：

<div class="trislider">
     <div class="tri1"></div>
     <div class="tri1stroke stroke"></div>
     <div class="tri2"></div>
     <div class="tri2stroke stroke"></div>
     <div class="tri3"></div>
     <div class="tri3stroke stroke"></div>
     <div class="tri4"></div>
     <div class="tri4stroke stroke"></div>
</div> <!-- /.trislider -->

<div class="trislider">
    <div class="tri1"></div>
    <div class="tri1stroke stroke"></div>
    <div class="tri2"></div>
    <div class="tri2stroke stroke"></div>
    <div class="tri3"></div>
    <div class="tri3stroke stroke"></div>
    <div class="tri4"></div>
    <div class="tri4stroke stroke"></div>
</div> <!-- /.trislider -->

问题是，在上一个动画结束时，我想从子动画的div中删除active类，并将active类添加到下一个父div并设置动画它的孩子。问题是第二个父div永远不会获得active类。

$('div.trislider:first').addClass('active');
$('div.trislider:first').addClass('first');
$('div.trislider:last').addClass('last');

setInterval(function() {

            // $('div.trislider.active').removeClass('active').next().addClass('active');

            $('div.trislider.active div.tri1, div.trislider.active div.tri1stroke').animate({
                'top': 0
            }, 1000);

            setTimeout(function() {
                 $('div.trislider.active div.tri2, div.trislider.active div.tri2stroke').animate({
                'top': 0
                }, 1000);
            }, 400);

            setTimeout(function() {
                 $('div.trislider.active div.tri3, div.trislider.active div.tri3stroke').animate({
                'top': 0
                }, 1000);
            }, 800);

            setTimeout(function() {
                 $('div.trislider.active div.tri4, div.trislider.active div.tri4stroke').animate({
                'top': 0
                }, 1000, function() {
                     $('div.trislider.active div.stroke').fadeOut('fast');
                     $('div.trislider.active').removeClass('active').next().addClass('active');
                });
            }, 1200);

        }, 5000);

但如果我更改以下行：

$('div.trislider.active').removeClass('active').next().addClass('active');

为：

$('div.trislider.active').next().addClass('active');

然后第二个.trislider获得活动类，但是如果我先删除它，那么它就不会得到它。

小提琴：

https://jsfiddle.net/7e1f3u95/1/

Answer 1

你的上一个陈述是错误的： $（ 'div.trislider.active'）removeClass（ '激活'）下（）addClass（ '激活'）;。。。

把它放在这里： $（ 'div.trislider.active'）removeClass（ '激活'）下（）addClass（ '激活'）。; }，5000）;

就在setInterval的末尾完成功能： setInterval（function（）{

            // $('div.trislider.active').removeClass('active').next().addClass('active');

            $('div.trislider.active div.tri1, div.trislider.active div.tri1stroke').animate({
                'top': 0
            }, 1000);

            setTimeout(function() {
                 $('div.trislider.active div.tri2, div.trislider.active div.tri2stroke').animate({
                'top': 0
                }, 1000);
            }, 400);

            setTimeout(function() {
                 $('div.trislider.active div.tri3, div.trislider.active div.tri3stroke').animate({
                'top': 0
                }, 1000);
            }, 800);

            setTimeout(function() {
                 $('div.trislider.active div.tri4, div.trislider.active div.tri4stroke').animate({
                'top': 0
                }, 1000, function() {
                     $('div.trislider.active div.stroke').fadeOut('fast');


                });
            }, 1200); 
    //should go here
    $('div.trislider.active').removeClass('active').next().addClass('active');
    }, 5000);

问题从一个DIV标记中删除一个类并添加到下一个标记

1 个答案: