Tengo el siguiente código, el círculo no cambia de tamaño:

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

Ejemplo

El problema

  • El círculo no hace nada, incluso cuando está suspendido.
1
David Debnar 22 sep. 2011 a las 21:10

3 respuestas

Hay varios problemas en su código:

Estás usando jQuery, así que usa sus manejadores.

En su lugar, debe usar los controladores en jQuery, como .hover() para controlar el mouse y Ratón fuera.

No hay guiones en las propiedades de JavaScript

No puede hacer cosas como margin-top: "-50px" y mucho menos margin - top: "-50px", en su lugar, debe usar camelCase marginTop: "-50px" o para clasificar sus propiedades: "margin-top": "-50px".

No se necesitan prefijos de proveedor

JQuery maneja automáticamente la versión correcta del navegador específico. No es necesario animar -webkit-border-radius y tal.

Ejemplo .

3
Madara's Ghost 22 sep. 2011 a las 17:19

Bastantes cosas:

  1. border-radius se interpreta como border - radius. En jQuery, el caso camel de propiedades: borderRadius.
  2. No haga onmouseover, etc. jQuery proporciona esta funcionalidad.
  3. No es necesario animar -webkit-..., etc. jQuery debería encargarse de esto.

Consulte este código para las soluciones: http://jsfiddle.net/9j795/7/

1
Blender 22 sep. 2011 a las 17:18

No agregue javascript: a onMouseOver y onMouseOut. Solo mainOver() y mainOut() es todo lo que necesitas.

EDITAR: Además, escribió mainOver() en un lugar y mainIn() en el otro.

2
Niet the Dark Absol 22 sep. 2011 a las 17:11