调整圆圈大小 - 虫子在哪里？

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'
    });
}

示例

问题

• 即使悬停在圆圈上，圆圈也不会执行任何操作。

Answer 1

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 2

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

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

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

JavaScript 属性中没有破折号

您不能执​​行诸如 margin-top: "-50px" 之类的操作，更不用说 margin - top: "-50px" 了，相反，您应该使用 camelCase marginTop: "-50px" 或字符串化您的属性："margin-top": "-50px"。

不需要供应商前缀

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

示例。

Answer 3

不要将 javascript: 添加到 onMouseOver 和 onMouseOut。只需 mainOver() 和 mainOut() 就可以了。

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

Answer 4

相当多的事情：

1. border-radius 被解释为border - radius。在 jQuery 中，属性驼峰式大小写：borderRadius。
2. 不要执行 onmouseover 等操作。jQuery 提供了此功能。
3. 不需要动画 -webkit-... 等。jQuery 应该处理这个问题。

请参阅此代码以获取修复：http://jsfiddle.net/9j795/7/