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

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

Есть скрипт, меняющий свойство 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!

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

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

попробуй сначала сделать это через 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">

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

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

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

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

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

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