0

私は現在、ユーザーができるだけ早くボタンをクリックし、ユーザーがクリックするとプログレスバーがユーザーに進行状況を表示する単純なゲームの作成に失敗しています.唯一の問題は、アニメーションが非常に途切れ途切れであることです..アニメーションを滑らかにする？

これがJSFIDDLEです

そしてJavaScript：

jQuery(document).ready(function(e) {
var $counter = $('#counter');
var $button = $('#lemon-button');
var count = 2;
var speed = 70;
//test for ie7 an ie8
if (!$.support.leadingWhitespace) {
    var countAddStep = 5;
//test for ie7 an ie8
}else{
    var countAddStep = 3;
}
var timeout;

    func = function () {
    count--;
    $counter.text(count);
    if(count <= 4) {
        jQuery('.bar').height(400);
    }
    if(count >= 5) {
        jQuery('.bar').height(350);
    }
    if(count > 6) {
        jQuery('.bar').height(300);
    }
    if(count > 8) { 
        jQuery('.bar').height(200);
    }
    if(count > 12) {
        jQuery('.bar').height(100);
    }
    if(count > 14) {
        jQuery('.bar').height(20);
    }
    if(count > 15) {
        jQuery('.bar').height(0);
        alert("finish");
    }

    if(count !== 0) {
        timeout = setTimeout(func, speed);
        }
    };

    $button.on('click', function() {
        count = count+countAddStep;
        $counter.text(count);
        if (count === countAddStep) {
            count++;
            func();
        }
    });
func();
});

どんな助けでも大歓迎です...

4

1 に答える 1

1

私は animate を使用しようとしましたが、JSFiddleで実用的なソリューションを思いつきました。主な問題は、滑らかなアニメーションには時間がかかることです。しかし、あなたの例では時間が本当に重要なので、アニメーションの時間に注意する必要があります...

jQuery(document).ready(function(e) {
var $counter = $('#counter');
var $button = $('#lemon-button');
var count = 2;
var speed = 70;
//test for ie7 an ie8
if (!$.support.leadingWhitespace) {
var countAddStep = 5;
//test for ie7 an ie8
}else{
var countAddStep = 3;
}
var timeout;

func = function () {
count--;
$counter.text(count);
if(count <= 4) {
    jQuery('.bar').animate({height: 400, opacity: 1}, {duration: 100, queue: false});
}
if(count >= 5) {
    jQuery('.bar').animate({height: 350, opacity: 1}, {duration: 100, queue: false});
}
if(count > 6) {
    jQuery('.bar').animate({height: 300, opacity: 1}, {duration: 100, queue: false});
}
if(count > 8) { 
    jQuery('.bar').animate({height: 200, opacity: 1}, {duration: 100, queue: false});
}
if(count > 12) {
    jQuery('.bar').animate({height: 100, opacity: 1}, {duration: 100, queue: false});
}
if(count > 14) {
    jQuery('.bar').animate({height: 20, opacity: 1}, {duration: 100, queue: false});
}
if(count > 15) {
    jQuery('.bar').animate({height: 0, opacity: 1}, 100, function() {alert("finish");});    }

if(count !== 0 && count <= 15) {
    timeout = setTimeout(func, speed);
    }
};

$button.on('click', function() {
    count = count+countAddStep;
    $counter.text(count);
    if (count === countAddStep) {
        count++;
        func();
    }
});
func();
});
于 2013-06-05T08:50:06.443 に答える