CSS过渡不起作用（高度和边距）

Question

I really don't know why this doesn't work: fiddle
When I click on the red box, I want it to move down 50px and change the height to 200px.

Any Idea?

Answer 1

Well this is how CSS work sadly, IDs take higher priority as a selector than a class would read this article for more info.

On click i added a class with the size/marign changes you wanted.

.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;
}

The JS

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

Here's a fiddle with the working solution. Fiddle

Answer 2

You could use this instead:

jsFiddle example

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

I also added in the -webkit- / -moz- vendors/prefixes.

Answer 3

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

SyntaxError: missing : after property id $(id).css({'margin-top', '50px'});

use : between property name and value not ,

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

this will work fine

maybe you can write your code in local html file and watch the console message throw firebug or other develop tool

thus can suffer less from error