|
|
|
| Помогите, пожалуйста, прикрутить animate() к этому аккордеону.
Как правильно указать селектор для верхнего подмышечного элемента списка?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<title>БАЯН</title>
<style type="text/css">
* {overflow:hidden; margin:0; padding:0}
.sm {list-style:none; width:99%; height:254px; display:block;}
.sm li {float:left; position:relative;}
</style>
<script type="text/javascript" src="ajax/jquery.js"></script>
<script type="text/javascript">
function makewidth(){
nu = $("#sm li").size();
ew = Math.floor(100/nu) + "%";
$("#sm li").css({'width' : ew});
}
$(document).ready(function(){
makewidth();
$("#sm li").mouseover(function(){
cw1 = $("#sm").width();
cw = cw1 - 540;
nu = $("#sm li").size() - 1;
ew = Math.floor(cw/nu);
perc = Math.floor(ew/cw1*100) + "%";
$("#sm li").width(perc);//вот здесь возникает дилемма
$(this).width(540);//если прописываю к примеру animate({width:540, 1000}), при наведении мыши начинается свистопляска.
});
})
$(window).resize(function(){
makewidth();
});
</script>
</head>
<body>
<ul id="sm" class="sm">
<li><img src="_test/slidemenu/images/1a.jpg" alt="" /></li>
<li><img src="_test/slidemenu/images/1a.jpg" alt="" /></li>
<li><img src="_test/slidemenu/images/1a.jpg" alt="" /></li>
<li><img src="_test/slidemenu/images/1a.jpg" alt="" /></li>
</ul>
</body>
</html>
|
upd
Все еще актуально... | |
|
|