Изменение размера круга - Где находится ошибка?

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. вы не включили jQuery в свой jsfiddle
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-... и т. Д.должен позаботиться об этом.

См. этот код для исправлений: http://jsfiddle.net/9j795/7/