Оптимизирвоать работу jQuery в скрипте

[karmis]

Всем доброго времени суток...

Есть скрипт, меняющий свойство css и прозрачность на jQuery...

применяется к большим картинкам... (220*220)

<script type='text/javascript'>
$(document).ready(
function()
{$(".ico").
hover
(function(){$(this).stop(true,true).animate({opacity: "1"}, "500").css("box-shadow", "#666 0px 2px 70px")},
function(){$(this).stop(true,true).animate({opacity: "0.5"}, "500").css("box-shadow", "#666 0px 2px 0px")});});
</script>

<div class=pth1><img src='images/1.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 90px; color: #FFF;'>TEXT</div>
<div class=pth2><img src='images/2o.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 330px; color: #FFF;'>TEXT</div>
<div class=pth3><img src='images/3.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 550px; color: #FFF;'>TEXT</div>
</div>
<div class='box2'>
<div class=pth1><img src='images/4.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 90px; color: #FFF;'>TEXT</div>
<div class=pth2><img src='images/5.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 320px; color: #FFF;'>TEXT</div>
<div class=pth3><img src='images/6.jpg' class='ico' /></div><div style='margin-top: 0px; margin-left: 550px; color: #FFF;'>TEXT</div>

очень сильно тормозит .... проходит около секунды, прежде чем срабатывает эффект...

как можно заставить работать его быстрее ? заранее danke schoen!

[karmis]

может что то не так делаю ... фактически нужно просто сменить прозрачность добавить тень

[melky]

danke schoen!

ого, полиглот )))

попробуй сначала сделать это через transition, вообще без использования JS. так можно будет понять, в скрипте дело, или в производительности окружения (браузера\компа)

код примерно такой. можно запустить и посмотреть

<style>
.ico {
box-shadow:#666 0px 2px 0px;
-moz-box-shadow:#666 0px 2px 0px;
-webkit-box-shadow:#666 0px 2px 0px;
-khml-box-shadow:#666 0px 2px 0px;
-o-box-shadow:#666 0px 2px 0px;

transition : opacity 1s linear;
-moz-transition : opacity 1s linear;
-webkit-transition : opacity 1s linear;
-o-transition : opacity 1s linear;
-khtml-transition : opacity 1s linear;

opacity: 0.5;
}
.ico:hover { opacity: 1 }
</style>
наведи на картинку
<img src="http://cs10860.vkontakte.ru/u56640186/125957565/z_bd8d7a4d.jpg" class="ico">

[karmis]

твой пример прекрасно работает в chrome и firefox
с тормозами работает в opera (с сильными рывками)
и вообще не работает в IE ....

видимо проблема таки в окружении ... есть какие то способы решить проблему ?

[melky]

использовать картинку поменьше

[trikadin]

Оптимизирвоать работу jQuery в скрипте

Первое, что пришло в голову - переписать на чистом JS.

[melky]

CSS быстрее JS. взята картинка отсюда. правда, там сравнивается добавление КЛАССА к элементу и танцы со style (cssstyledeclaration), но это одно и то же

если хотите, могу провести сравнение $.animate и css-transitions