Вопрос о CSS и JS.
В общем задача была такая:
Создать анимацию для галереи(возможность листать слайды при помощи кнопок "вперед" - "назад"). примерная структура структура хтмл следующая: <body>
<div id="page">
<div id="main">
<div id="content">
<div id="carousel">
</div>
</div>
<div id="side-bar">
</div>
</div>
</div>
</body>
Сайт сверстан при помощи css3 свойств.Все 3 блока page,main,content имеют свойства скругления и тени.Блок carousel имеет свойство float:left,блок side-bar - float:right, имитируют инлайновость. Анимация реализована в двух вариантах: самописной и jquery.animate(). Независимо от реализации Столкнулся со следующей проблемой - в Mozilla анимация жутко тормоzilla.В других браузерах анимация прокручивалась отлично. В принципе решения были найдены - убрать с блока content,в котором находится галерея, свойства css3 и float:left.Или вынести галерею из блоков с css3 и поместить,допустим, в одтельный див в body. Так же попробовал при помощи position:absolute спозиционировать галерею вверху экрана, т.е. вытащить ее визуально из родительских блоков. Все это решало проблему с анимацией, но в конечном итоге породило ВОПРОС: Пересчитывают ли браузеры (вот та же мурзила) css стили в процессе работы со страницей, из-за чего могут происходить такие тормоза в расчетах?.Собственно я пришел к выводу, что браузер пересчитывает свойства соседних элементов при применении к одному из элементов новых стилей с помощью js.Может ли кто-нибудь что-то прояснить по этому вопросу?Ничего нагуглить не удалось. UPD: firefox portable воспроизводит без тормозов. |
Размести тогда демку с обоими вариантами?
|
Цитата:
<html>
<head>
<style>
#carousel{
width:600px;
}
#carousel .slide-holder{
width:400px;
overflow:hidden;
height:100px
}
#carousel ul{
width:1000px;
list-style:none;
margin:0;
}
#carousel li{
width:50px;
height:100px;
float:left;
margin: 0 5px 0 5px;
}
#carousel ul a{
display:block;
height:100px;
text-indent:-9999px;
}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js' type='text/javascript'></script>
<script>$(document).ready(function(){$('.btn-next').click(function(){$('.slide-holder ul').animate({marginLeft:'500px'},1000,function(){this.style.marginLeft ='0px'})})})</script>
</head>
<body>
<div id="page">
<div id="main">
<div id="content">
<div id="carousel">
<a class="btn-prev" href="#">Previous</a>
<div class="slide-holder">
<ul>
<li><a href="#" style="background-color:#faa;">Item 1</a></li>
<li><a href="#" style="background-color:#afa;">Item 2</a></li>
</ul>
</div>
<a class="btn-next" href="#">Next</a>
</div>
</div>
<div id="side-bar">
</div>
</div>
</div>
</body>
</html>
(Примерно так это выглядит :) ) Вот точная структура, исключая остальной контент. При попытке применить к ней jQuery анимацию, лиса выдавала не гладкую прокрутку,в отличие от оперы, а тормозящие слайды. Выкладывать сюда весь js код или копировать стили не считаю необходимым, так как не знаю что именно вызывало такой эффект, НО почему-то удаление свойства float:left с блока content почти полностью устраняло проблему, а удаление css3 вообще снимало мельчайшие задержки анимации.Какие из свойств конфликтуют,точно я сказать не могу, и не думаю, что кто-то для меня станет разбирать сотни/тысячу строк css'a. Вопрос заключается в том - пересчитывают ли браузеры стили каких-то элементов, кроме того, к которому обращается js?В данном случае у меня сложилось именно такое впечатление и это все объясняет.Знакомый мне верстальщик утверждает, что таблицы стилей никак не могут повлиять на анимацию и расчеты вцелом. |
Цитата:
|
Цитата:
|
| Часовой пояс GMT +3, время: 23:40. |