Сообщение от da_ff
|
|
Размести тогда демку с обоими вариантами?
|
<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?В данном случае у меня сложилось именно такое впечатление и это все объясняет.Знакомый мне верстальщик утверждает, что таблицы стилей никак не могут повлиять на анимацию и расчеты вцелом.