Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 07.08.2013, 16:08
Аватар для Алек
Аспирант
Отправить личное сообщение для Алек Посмотреть профиль Найти все сообщения от Алек
 
Регистрация: 14.04.2013
Сообщений: 85

Некорректная работа метода .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;
})
});


Заранее большое спасибо!
Ответить с цитированием
  #2 (permalink)  
Старый 07.08.2013, 16:41
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

вот тут написано следущее
Цитата:
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;
  })
});
Ответить с цитированием
  #3 (permalink)  
Старый 07.08.2013, 17:32
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 31,031

mta88,
запятые строки 8 и 15
Ответить с цитированием
  #4 (permalink)  
Старый 07.08.2013, 17:37
Профессор
Отправить личное сообщение для mta88 Посмотреть профиль Найти все сообщения от mta88
 
Регистрация: 16.05.2013
Сообщений: 229

Сообщение от рони Посмотреть сообщение
запятые строки 8 и 15
я тестировал с нижними радиусами, а верхние без проверки дописал
Ответить с цитированием
  #5 (permalink)  
Старый 07.08.2013, 18:14
Аватар для Алек
Аспирант
Отправить личное сообщение для Алек Посмотреть профиль Найти все сообщения от Алек
 
Регистрация: 14.04.2013
Сообщений: 85

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


Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Некорректная работа get(set)Attribute в IE для элементов img back to back Internet Explorer 15 09.06.2012 15:52
Некорректная работа slideUp и slideDown vuler jQuery 4 24.04.2012 23:31
Написание метода подобного .animate() (Sandr) Общие вопросы Javascript 11 15.07.2011 18:31
Некорректная работа скрипта в разных браузерах en-k Общие вопросы Javascript 2 15.03.2011 13:54
Некорректная работа скрипта defond Серверные языки и технологии 15 24.01.2011 17:07