调整圆圈大小 - 错误位于何处？

Question

我有以下代码，圆圈没有调整大小：

HTML

<div onMouseOver="mainOver();" onMouseOut="mainOut();" id="c"></div>

JavaScript / jQuery

function mainIn()
{
    $('#c').animate({
        border-radius: '100',
        webkit-border-radius: '100',
        moz-border-radius: '100',
        width: '200',
        height: '200',
        margin-left: '-100',
        margin-top: '-100'
    });
}

function mainOut()
{
    $('#c').animate({
        border-radius: '50',
        webkit-border-radius: '50',
        moz-border-radius: '50',
        width: '100',
        height: '100',
        margin-left: '-50',
        margin-top: '-50'
    });
}

Example

问题

• 即使在盘旋时，圆圈也什么也没做。

Answer 1

您的代码中存在以下几个问题：

您正在使用jQuery，因此请使用它的处理程序。

您应该使用jQuery中的处理程序，例如.hover()来处理鼠标移除和鼠标移出。

JavaScript属性中没有破折号

您不能执行margin-top: "-50px"之类的事情，更不用说margin - top: "-50px"了，而应该使用 camelCase marginTop: "-50px"或将字符串化属性："margin-top": "-50px"。

不需要供应商前缀

jQuery自动处理特定浏览器的正确版本。无需动画-webkit-border-radius等等。

<强> Example

Answer 2

1. 你没有在你的jsfiddle中包含jQuery
2. 使用border-radius:50%在 anysize
中制作方形圆圈
3. 使用jQuery绑定事件，它更容易！
4. 动画需要时间和回调功能

查看固定代码：

$('#c').hover(function(){
    $(this).animate({
        width: 200,
        height:200,
        'margin-left':'-100px',
        'margin-top':'-100px'
    }, 500, function(){});
},function(){
    $(this).animate({
        width: 100,
        height:100,
        'margin-left':'-50px',
        'margin-top':'-50px'
    }, 500, function(){});
});

http://jsfiddle.net/mohsen/9j795/16/

Answer 3

请勿将javascript:添加到onMouseOver和onMouseOut。只需mainOver()和mainOut()即可。

编辑：此外，您在一个地方写了mainOver()，在另一个地方写了mainIn()。

Answer 4

很多事情：

1. border-radius被解释为border - radius。在jQuery中，属性为camel case：borderRadius。
2. 不要onmouseover等.jQuery提供此功能。
3. 无需动画-webkit-...等等.jQuery应该处理这个问题。

请参阅此代码以了解修正：http://jsfiddle.net/9j795/7/