1

ユーザーがリンクを超えている間に要素をアニメーション化しようとしています

var i = 0;

function next(){
    while (i>-10) {
        i--;
        $('#conteudo').animate({left:"'"+i+"px'"},'slow');
    };
}

$('#next').hover(function(){
    next();
});

しかし、その値は即座に-10..-1..-2..-3..-4..のようなことをしようとしています.-10になるまで。インクリメントする前に遅延を制御できますか?

私は何を間違っていますか？

ここにjsfiddleのリンクがありますhttp://jsfiddle.net/KwhSg/

4

4 に答える 4

5

私はあなたが何をするのか誤解していると思いますanimate。これで全体を置き換えてみてください：

$('#next').hover(function(){
    $('#conteudo').animate({left:'-=10'},'slow');
});

Animateすでにアニメーション、遅延、作品の世話をしています。

于 2013-04-03T19:28:12.163 に答える
2

別の回答者が指摘したanimateように、これを処理するように設計されています。しかし、学習のために、あなたがやろうとしていることを行う方法は次のとおりです。

var i = 0;
function next(){
    $('#conteudo').css({left:"'"+i+"px'"});
    // use setTimeout to pause for 30 milliseconds and let the view update
    if (i-- > -10) setTimeout(next, 30);
}

$('#next').hover(function(){
    next();
});

setTimeoutwhile ループの代わりに使用する必要があります。ビューを更新できるように、反復間で一時停止します (この場合は 30 ミリ秒)。

あなたの最初の試みでは、 while ループが実行されている限り、プロセスを完全に制御できるため、ループが終了するまでビューを更新できません。ループが終了すると、既にデクリメントが完了しているiため、アニメーションは表示されません。

于 2013-04-03T19:30:13.253 に答える
2

「ホバーオーバー」イベントで設定できるブール変数をtrueに設定し、「ホバーアウト」イベントでfalseに設定できたので、whileループは次のようになります

function next(){
    while (i>-10 && !notHovered) {
        i--;
        $('#conteudo').animate({left:"'"+i+"px'"},'slow');
    };
}
于 2013-04-03T19:30:41.223 に答える
0

setTimeout 関数を使用できます

http://www.w3schools.com/jsref/met_win_settimeout.asp

それを使用して、特定の間隔でアニメーション値をインクリメントします

これはまだ解決されていないため、ここで解決策を示します。必要に応じてタイムアウト/アニメーション速度を変更できます。

http://jsfiddle.net/649az/

var i =10;
function next(){        
     $('#conteudo').animate({left:"-=10"},'slow');
}


$('#next').hover(function(){

    while (i>0){
        i--;
       setTimeout(next(),1000);
    }
});
于 2013-04-03T19:26:36.800 に答える