繰り返しますが、私はjqueryを初めて使用し、このオフィススペース計算機を機能させようとしています。total
" " の値が変化したときに別のアニメーションを使用したい。同様に1
を選択して「calculate
」を選択すると、アニメーションを再生します。
$(document).ready(function () {
$('#arrow-right').click(function () {
if (parseInt($('#total').text()) < 3) {
$('#total').text(parseInt($('#total').text()) + 1);
}
});
})
$(document).ready(function () {
$('#arrow-left').click(function () {
if (parseInt($('#total').text()) > 1) {
$('#total').text(parseInt($('#total').text()) - 1);
}
});
})
$(document).ready(function () {
$("#calculate").click(function () {
if ('#total' == 1) {
$("#requirements-contact").css("display", "block");
$("#space-calculator").animate({
height: '595px'
}, "slow");
var div = $("#space-total, #thousands, #hundreds, #tens, #units");
div.animate({
display: 'toggle'
}, "slow");
div.animate({
bottom: '-895px'
}, "slow");
var div = $("#hundreds");
div.animate({
bottom: '-695px'
}, "slow");
var div = $("#tens");
div.animate({
bottom: '-395px'
}, "slow");
var div = $("#units");
div.animate({
bottom: '-195px'
}, "slow");
}
if ('#total' == 2) {
$("#requirements-contact").css("display", "block");
$("#space-calculator").animate({
height: '595px'
}, "slow");
var div = $("#space-total, #thousands, #hundreds, #tens, #units");
div.animate({
display: 'toggle'
}, "slow");
div.animate({
bottom: '-895px'
}, "slow");
var div = $("#hundreds");
div.animate({
bottom: '-695px'
}, "slow");
var div = $("#tens");
div.animate({
bottom: '-395px'
}, "slow");
var div = $("#units");
div.animate({
bottom: '-195px'
}, "slow");
}
if ('#total' == 3) {
$("#requirements-contact").css("display", "block");
$("#space-calculator").animate({
height: '595px'
}, "slow");
var div = $("#space-total, #thousands, #hundreds, #tens, #units");
div.animate({
display: 'toggle'
}, "slow");
div.animate({
bottom: '-895px'
}, "slow");
var div = $("#hundreds");
div.animate({
bottom: '-695px'
}, "slow");
var div = $("#tens");
div.animate({
bottom: '-395px'
}, "slow");
var div = $("#units");
div.animate({
bottom: '-195px'
}, "slow");
}
});
})