CSS Переход не работает (высота и маржа)

Question

Я действительно не знаю, почему это не работает: fiddle
Когда я нажимаю на красную рамку, я хочу, чтобы она опустилась на 50 пикселей и изменила высоту на 200px.

Любая идея?

Answer 1

Вы могли бы использовать это вместо того, чтобы:

jsFiddle example

$('#box').click(function(){ 
    $(this).css('margin-top','50px'); 
    $(this).css('height','200px'); 
}); 

Я также добавил в -webkit-/-moz- продавцов/префиксов.

Answer 2

function changeprop(id) 
{ 
    $(id).css({'margin-top', '50px'}); 
    $(id).css({'height', '200px'}); 
} 

SyntaxError: отсутствует: после ID недвижимости $ (идентификатор) .css ({ 'Верхнее поле', '50px'});

использование: от имени свойства и значения нет,

function changeprop(id) 
{ 
    $(id).css({'margin-top': '50px'}); 
    $(id).css({'height': '200px'}); 
} 

это будет работать нормально

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

таким образом может пострадать меньше от ошибки

Answer 3

Ну, вот как работает CSS с грустью, идентификаторы имеют более высокий приоритет как селектор, чем класс woul d читать это article для получения дополнительной информации.

При щелчке я добавил класс с желаемыми размерами/маской.

.box { 
    background-color: red; 
    height: 100px; 
    margin-top: 0px; 
    width: 100px; 
    display: block; 
    transition: all .5s ease-in-out; 
} 

.box-active { 
    height: 200px; 
    margin-top: 50px; 
} 

JS

$('.box').click(function(){ 
    $(this).addClass("box-active"); 
}); 

Вот скрипку с рабочим раствором. Fiddle