Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Некорректная работа метода .animate (https://javascript.ru/forum/jquery/40490-nekorrektnaya-rabota-metoda-animate.html)

Алек 07.08.2013 17:08

Некорректная работа метода .animate
 
Доброго всем времени суток! У меня проблема такая жёсткая: метод .animate не желает адекватно работать с css правилом border-radius!
А именно: первая часть выполняется хорошо за указанное время, а вот вторая изменяется мгновенно, как будто это не метод .animate, а метод .css
Почему так происходит? Вот он сам код:


<div id="element">
		<div id="border_1">
		</div>
		<a href="#" class="button">Animate Me!</a>
	</div>

$(function(){
var state = true;
$('.button').click(function(){
	if(state){
		$('#border_1').animate({'borderRadius': '90px'}, 500);
	}
	else{
		$('#border_1').animate({'borderRadius': '0'}, 500);
	}
	state = !state;
})
});


Заранее большое спасибо!

mta88 07.08.2013 17:41

вот тут написано следущее
Цитата:

border-radius это составное свойство, состоящее из 4-х чисел, а animate не работает с составными свойствами
то есть нужно изменять радиусы всех углов по отдельности
$(function(){
  var state = true;
  $('.button').click(function(){
    if(state){
      $('#border_1').animate({
        'borderBottomLeftRadius': '90px',
        'borderBottomRightRadius': '90px',
        'borderTopLeftRadius': '90px'
        'borderTopRightRadius': '90px'
      }, 500);
    } else{
      $('#border_1').animate({
        'borderBottomLeftRadius': '0',
        'borderBottomRightRadius': '0',
        'borderTopLeftRadius': '0'
        'borderTopRightRadius': '0'
      }, 500);
    }
    state = !state;
  })
});

рони 07.08.2013 18:32

mta88,
запятые строки 8 и 15

mta88 07.08.2013 18:37

Цитата:

Сообщение от рони (Сообщение 266390)
запятые строки 8 и 15

я тестировал с нижними радиусами, а верхние без проверки дописал :-?

Алек 07.08.2013 19:14

Да, действительно, анимировать нужно каждое значение по отдельности, первая часть оператора прокатила как исключение из правила (может это свойство браузера такое?).
Так что спасибочки, mta88 , всё прекрасно работает!:)


Часовой пояс GMT +3, время: 13:10.