javascript - アニメーション化すると同時に、クラスをliに追加します

Question

divのブロックをアニメーション化すると同時に、liにクラスを追加したかったのですが、どうすればよいですか？

私のフィドル-http://jsfiddle.net/AsfFQ/4/

「赤」の背景のdivをクリックすると、0pxが左にアニメーション化されます。divのアニメーションの20pxごとにliに「選択された」クラスを追加する方法。

Answer 1

新しいjQuery1.8を使用すると、実際にアニメーションを実行して約束を取り戻すことができ、返されるオブジェクトにはアニメーション状態、トゥイーンなども含まれ、それを使用してクラスを適用する要素を計算できます。これはちょっと実験的なものです。 、そして私はこれで遊んで始めたばかりですが、次のようなものです：

$(function() {
    $('.block').on('click', function(){
        var ani = $.Animation( this, {left:0}, {duration: 1000} );

        ani.progress(function(e) {
            var Now = e.tweens[0].now,
                idx = Math.round(Now/10);
            $(".container ul li").eq(idx).addClass('selected').siblings().removeClass('selected');
        });
    });    
});    

フィドル </p>

Answer 2

このデモをご覧ください。

これがJavascriptです：

var timer, 
    selectLi = (function() {
        var $block = $('.block'),
            $container = $('.container'),
            $lis = $('.container ul li'),
            liWidth = $lis.width(),
            $selectedLi;

        return function() {
            var pos = $block.offset().left - $container.offset().left,
                liNum = Math.round(pos / liWidth);
            $selectedLi && $selectedLi.removeClass('selected');
            $selectedLi = $($lis.get(liNum));
            $selectedLi.addClass('selected');
        };
    })();

$('.block').click(function() {
    timer = setInterval(selectLi, 30);
    $(this).animate({
        left: 0
    }, function() {
        clearInterval(timer);
    });
});