автоматическое изменение размера div при наведении мыши

Question

Я пытаюсь автоматически изменить размер серии div при наведении мыши.Эффект работает, но он немного медленный.Любые советы будут оценены.

$('#Main').delegate('div', 'mouseover', function() {
    $(this).closest("div").animate({"height":"290px"}, 500).addClass("highlight").siblings().removeClass('highlight').animate({"height":"200px"},500);
});

Проверьте на Fiddle для работы демо -

http://jsfiddle.net/dsnegi/y8LrT/

Answer 1

«500» в вашем вызове функции - это ваш интервал времени. 500 миллисекунд. Уменьшите это, чтобы сделать это быстрее. Однако имейте в виду, что анимации JS по своей сути являются «хаком» (я тоже их использую, но давайте называть вещи своими именами!). Вы просто изменяете размеры и перемещаете элементы за интервал времени в пиксельной сетке, используя механизм рендеринга, действительно предназначенный для статических макетов. Плавность анимации будет частично зависеть от скорости вашего компьютера и от того, какой браузер вы используете.

Для такого эффекта наведения я бы настоятельно рекомендовал вместо этого изучить анимацию CSS3, которая будет более плавной и может быть аппаратно ускорена.

Answer 2

действительно ценю это.

попробовал ваше предложение, но для меня лучше всего было использовать "mouseenter" вместо mouseover.

Я обновил скрипт http://jsfiddle.net/dsnegi/y8LrT/4/

ура

Answer 3

Я переписал твой код с .on() вместо .delegate(), и я думаю это немного быстрее. Я также добавил некоторые функции .stop(), чтобы избавиться от лишних ненужных анимаций, чтобы сделать их немного более плавными и быстрыми (чем меньше анимации, тем быстрее). Вы также можете настроить продолжительность анимации, но я попытался заставить ее работать немного быстрее за счет производительности, а не просто изменив параметр, который, я полагаю, вы выбрали.

http://jsfiddle.net/y8LrT/3/