Question

我有一个while循环，将跨度附加到div中，该div是滑块的分页。我已经为分页容器的第一个孩子添加了一个类，但是当滑块进展时我无法让我的jQuery为其他数字设置动画。如果我已经非常好地描述了这个问题，我会道歉，但是我将包含我迄今为止的代码和一个jsfiddle以显示正在发生的事情。

jQuery的：

    // Change Orbit slide numbers so that they grow on active 
    var getSlides = $( '.orbit-slides-container' );
    var currentSlide = $('[data-orbit]').children('li');
    var currentSlideID = currentSlide.attr('id');
    var totalSlides = getSlides.children().length;
    var growingNumber = $( '.growing-slide-number' );
    var slideNumber = $( '.growing-slide-number' ).children('span').attr('id');
    var step = 0;

    // Function to add class os number grows.
    $.fn.grow = function() {
        $(this).addClass('active');             
    };

    // Function to shrink number to original size
    $.fn.growNext = function() {
        $(this).removeClass('active');
        $(this).next().addClass('active');
    };

    $('.orbit-timer').after('<div class="growing-slide-number"></div>');

    // Loop through slides adding a number for each slide.
    while ( step < totalSlides ) {
        step++;
        $('.growing-slide-number').append('<span id="slide-' + step + '">' + step + '</span>');
    }

SASS：

.growing-slide-number { 
    @media #{$small-only} { display: none; }
    bottom: 45px;
    left: 25px;
    font-size: rem-calc(16); 
    position: relative;
    -webkit-transform:scale(1.0);

    span {
        @include single-transition();
        margin-right: rem-calc(15);
        color: $white;
        font-weight: bold;
        font-size: 16px;

    }
    span.active {
        font-size: 32px;
    }
}

非常感谢任何帮助：）

如果您需要更多信息，请不要犹豫。

JSFIDDLE HERE

jQuery循环通过元素来动画它们

0 个答案: