在循环中添加和删除类

时间:2014-03-28 07:17:17

标签: javascript jquery

我正在尝试创建类似旋转木马的东西,添加和删除元素特定类

<div class="advantages-slider">
<ul class="advantages-list">
    <li class="visible-adv">
        <img src="http://heidel.tw1.ru/test3/img/advantage_5.png" alt="" style="top: 11px; left: 12px;" />
        <div class="advantage-item-title">test</div>
        <div class="advantage-item-text">test</div>
    </li>
    <li class="visible-adv main-adv">
        <img src="http://heidel.tw1.ru/test3/img/advantage_4.png" alt="" style="top: 11px; left: 2px;" />
        <div class="advantage-item-title">test</div>
        <div class="advantage-item-text">test</div>
    </li>
    <li class="visible-adv">
        <img src="http://heidel.tw1.ru/test3/img/advantage_3.png" alt="" style="left: 2px;" />
        <div class="advantage-item-title">test</div>
        <div class="advantage-item-text">test</div>
    </li>
    <li>
        <img src="http://heidel.tw1.ru/test3/img/advantage_2.png" alt="" style="top: 11px; left: 10px;" />
        <div class="advantage-item-title">test</div>
        <div class="advantage-item-text">test</div>
    </li>
    <li>
        <img src="http://heidel.tw1.ru/test3/img/advantage_1.png" alt="" style="top: 11px; left: 5px;" />
        <div class="advantage-item-title">test</div>
        <div class="advantage-item-text">test</div>
    </li>
</ul>

我的剧本

$.fn.toggle_class_3 = function () {
var lis = this.find('li'),
    visibleLis = this.find('li.visible-adv'),
    len = lis.length,
    i = 0; // initialize pointer

setInterval(function () {
    visibleLis.slice(i, i + 1).animate({
        opacity: 0,
        width: 0,
        top: '50%',
        'left': '-50%'
    }, {
        duration: 200,
        queue: false,
        complete: function () {
            $(this).removeClass('visible-adv').css({
                'top': '50%',
                    'left': '50%'
            });
        }
    });

    lis.slice( i + 3, i + 4).animate({
        opacity: 1,
        width: '274px',
        height: 'auto',
        left: 0,
        top: 0
    }, {
        duration: 200,
        queue: false,
        complete: function () {
            $(this).addClass('visible-adv');
        }
    });

    i = (i + 1) % len;
}, 2000);

return this;
};

$('.advantages-list').toggle_class_3();

.visible-adv'最初被添加到前三个元素中,然后我从第一个元素中删除它并添加到第四个元素,依此类推。但我无法在周期中实现这一点。有没有办法让它发挥作用?

http://jsfiddle.net/YjpFL/1/

0 个答案:

没有答案