$ .css ('переход', 'значение') не работает

Question

Я пытаюсь применить переход css3 на лету, но jquery ничего не делает.

код

var test = $("#test"); 
test.css("transition","all 500ms"); 

я также попытался

var delay = "500ms"; 

test.css({ 
    'transition': 'all ' + delay, 
    '-moz-transition': 'all ' + delay, 
    '-webkit-transition': 'all ' + delay, 
    '-o-transition': 'all ' + delay 
}); 

Что случилось с моим кодом?

Обновлено:

«JQuery не делать ничего» буквально означает, что он не применяется стиль к элементу. Я не имею в виду, что элемент не перемещается.

Исправление:

это на самом деле работает ... это был мой браузер.

Answer 1

var delay = "500ms", 
    test = $("#test"); 

test.css({ 
    'transition': 'all ' + delay, 
    '-moz-transition': 'all ' + delay, 
    '-webkit-transition': 'all ' + delay, 
    '-o-transition': 'all ' + delay 
}).on('click', function() { 
    $(this).css({ left : '+=100' }); 
});​ 

http://jsfiddle.net/YwfjF/

Вы можете видеть, что это работает, но вы должны изменить свойство для того, чтобы быть анимированными.

Вот отличная ссылка для переходов CSS3: https://developer.mozilla.org/en/CSS/transition (обратите внимание на ссылки внизу, описывающие разные части декларации перехода).

Answer 2

Я не думаю, что вы понимаете, как работают CSS3-переходы. Параметры перехода CSS3 управляют тем, как обрабатываются свойства для объекта, и получают ли они немедленный эффект, или инициируют ли они переход, чтобы он переходил к новому значению с течением времени.

У вас должно быть фактическое изменение свойства, чтобы иметь переход. Установка самого значения перехода не вызывает переход - он просто устанавливает правила, когда переход произойдет в будущем.

В вашем примере вам необходимо изменить какое-либо значение, чтобы увидеть изменение. Например:

test.css("height", "100px"); 

Поскольку у вас есть transition: all, что повлечет за собой переход от текущего значения высоты на новое значение высоты.

Например, вот переход CSS3, который я создал для другого вопроса пару дней назад: http://jsfiddle.net/jfriend00/P2H4Z/.

В этом примере есть этот CSS отношение к переходу:

.element 
{ 
    background: blue; 
    position: absolute; 
    left: -100%; 
    padding: 0 10px; 

    -moz-transition: left 1s; 
    -webkit-transition: left 1s; 
    -o-transition: left 1s; 
    -ms-transition: left 1s; 
    transition: left 1s; 
} 


.element.seen { 
    left: 0; 
} 

Это создает почву для перехода left собственности. Это не вызывает переход. Переход может быть инициирован путем внесения изменений в свойство left на товар с class="element". Это изменение значения left может быть сделано:

1. Добавление класса для элемента или родительского элемента, который вызывает различные left значения вступили в силу с правилами CSS.
2. Срабатывание класс псевдо вступили в силу (например, :hover)
3. Программным изменения значения .left с JavaScript.

В этом конкретном примере seen класса добавляется к объекту, который вызывает левое значение для перехода от -100% к 0.Поскольку определяется transition left 1s, браузер переходит от текущего значения -100% к новому значению 0 в течение 1 секунды, и, таким образом, объект будет помещаться на место.

Answer 3

Шаг 1: определить класс CSS для переходов:

.CustomTransitionClass{ 
    -webkit-transition:all 0.5s ease; 
    -moz-transition:all 0.5s ease; 
    -o-transition:all 0.5s ease; 
    transition:all 0.5s ease;} 

Шаг 2: добавить класс:

$("#test").addClass('CustomTransitionClass');