0

Не работает код. Слышал, что в css нельзя анимировать text-align, я подумал, через js можно. Я менял свойство color, но тоже не работает. Т.е. уже дело не в text-align. В чем может быть проблема?

html:

<div class="login">
  <p><span class="glyphicon glyphicon-user"></span>login</p>
</div>

javascript:

$(document).ready(function(){
    $('.login').mouseover(function() { 
        $(".login p").animate({ text-align: "right" }, 1000);
    });
});
1
  • text-align это css стиль, а не анимирующее свойство. Commented 23 февр. 2016 в 18:54

2 ответа 2

2

Для тех, кто из 2020 года или позже:

$(".login p").animate({ textAlign: "right" }, 1000);

В javascript тире считается как минус, запомните это как правило! Вместо тире мы первую букву следующего слова возносим в верхний регистр. Поэтому будет textAlign

1

Как уже сказал ранее Jean-Claude, text-align — это не анимирующее свойство.

Анимировать на CSS всё же можно:

.login p {
  left: 0;
  position: absolute;
  text-align: right;
  right: 100%;
  -webkit-transition-property: all;
  -webkit-transition-duration: 1s;
}
.login p:hover {
  position: absolute;
  right: 0;
  left: 0;
}

DEMO: https://jsfiddle.net/yt9eydju/

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.