Как изменять progress в jquery?

Question

[Даниил Сухих]

Есть код:
<progress value="" max="100">

$(document).ready(function() {
	$('button').click(function() {
		$('progress').val(20);
	});
});

Как при нажатии на кнопку каждый раз прибавлять к прогресс по 20?
И как сделать это плавно?

Answer 1

[Nick Sdk]

$('progress').val($('progress').val() + 20);

вот, чтобы было плавно
https://jsfiddle.net/r445dny7/3/

Answer 2

[Михаил Смыков]

$('progress').attr('value', '20');

Comments

[Даниил Сухих]

Прибавляется только 1 раз, а нужно что-бы при каждом нажатии +20 былою

[Михаил Смыков]

danchiksux,
$('progress').val($('progress').val()+20);

[Даниил Сухих]

Михаил Смыков, а плавно как сделать?

[Михаил Смыков]

danchiksux,
CSS:

progress {
  transition: all 0.5s ease;
}

0.5s - пол-секунды

[Даниил Сухих]

Михаил Смыков, не работает.

[Михаил Смыков]

danchiksux, куда вставляешь?
В HTML рядом с тегом progress вставь это:

<style>
progress {
  transition: all 0.5s ease;
}
</style>

[Даниил Сухих]

Михаил Смыков, вставлял в отдельный css файл, вставил напрямую в html не работает...

[Даниил Сухих]

Михаил Смыков, https://jsfiddle.net/287czLxe/