6

I have a Swiper slider and a counter position like "1/10". I would like to change that current slide number (the 1) with an animation. I know how to replace the number but with this animation, it's like another story:

As you can see on the gif, it's working nicely if I click moderately on my slider, but when I double-triple-or-crazy click on the next link, that totally breaks the counter, due to the clone made in this gif example.
Do you know how can I do that in a better way?

I made a jsfiddle, working for the first count change only:
— http://jsfiddle.net/asb39sff/1/

// Init
var $c_cur = $("#count_cur"),
    $c_next = $("#count_next");

TweenLite.set($c_next, {y: 12, opacity: 0}, "count");


// Change counter function
function photos_change(swiper) {
    var index = swiper.activeIndex +1,
        $current = $(".photo-slide").eq(index),
        dur = 0.8,
        tl = new TimelineLite();

    // Just a test
    tl.to($c_cur, dur, {y: -12, opacity: 0}, "count")
      .to($c_next, dur, {y: 0, opacity: 1}, "count")

    //$c_cur.text(index);
    //$c_next.text(index + 1);
}
4

2 に答える 2

0

あなたの HTML 構造はアニメーションには十分ではないと思うので、別のアプローチとカスタム html タグを使用して独自のフィドルを作成しました。アニメーションは CSS3 トランジションを使用して行われ、高速クリックの問題を回避するために数値が事前に計算されます。

Jクエリ:

$('#change-button').click(function(){

    //Getting current slide
    var $current = $('.current'); 

    //Remove the class to find next one
    $current.removeClass('current');

    if($current.is(':last-child')){
        //Resetting the counter if is the last child
        $('#counter ul li:first').addClass('current');
        $('#counter ul').css('top','0px');
    }
    else{
        $current = $current.next();
        $current.addClass('current');
        //Getting the next number to recalculate 
        //the new top position
        var $num = parseInt($current.text());
        $('#counter ul').css('top',-($num-1)*18+'px');
    }

});


$('#change-button').click(function(){
    var $current = $('.current');
    $current.removeClass('current');
    
    if($current.is(':last-child')){
        //Resetting the counter
        $('#counter ul li:first').addClass('current');
        $('#counter ul').css('top','0px');
    }
    else{
        $current = $current.next();
        $current.addClass('current');
        var $num = parseInt($current.text());
        $('#counter ul').css('top',-($num-1)*18+'px');
    }
    
});
.container{
    background-color: #000;
    padding: 10px;
    color: #fff;
    width: 300px;
    float: left;
}
.container li{
    display: inline-block;
    vertical-align: middle;
}

#counter{
  width: 16px;
  height: 18px;
  overflow: hidden;
  position: relative;
}

#counter ul{
  position: absolute;
  padding: 0;
  margin: 0;
  height: 18px;
  width: 16px;
  transition: all .5s;
}

#counter ul li{
    display: block;
    clear: both;
    text-align: right;
}

#change-button{
    margin: 10px;
    float: left;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
    <li>Graphics</li> 
    <li id="counter">
        <ul>
            <li class="current">1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
            <li>10</li>
            <li>11</li>
            <li>12</li>
        </ul>
    </li>
    <li>/ 4</li>
</div>

<button id="change-button" href="#">Change!</button>

アニメーションが機能する場合は、すべての値を含む順序付けられていないリストを生成して、アニメーションをコードに統合し、スライドの数を把握する必要があります (簡単なはずです)。

于 2015-04-26T05:43:11.343 に答える