Question

我真的不知道为什么这不起作用：fiddle
当我点击红色框时，我希望它向下移动50px并将高度更改为200px。

任何想法？

Answer 1

这就是CSS的工作原理，遗憾的是，ID作为选择器的优先级高于类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

Answer 2

你可以改用它：

jsFiddle example

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

我还添加了-webkit- / -moz-个供应商/前缀。

Answer 3

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

SyntaxError：missing：属性id之后 $（id）.css（{'margin-top'，'50px'}）;

使用：属性名称和值之间不是，

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

这样可以正常使用

也许您可以在本地html文件中编写代码并观看控制台消息抛出firebug或其他开发工具

因此可以减少错误

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

3 个答案: