| |
|
|
| | в интернете нарыл красивый аккордеон для сайта, по умолчанию одна вкладка у него открыта, а при навидении на другую, закрывается прежняя и открывается та, на которую навел, после того как отвел курсор она остается открыта...
вот нужно сделать так, чтоб по умолчанию они све были закрыты и при на видении на вкладку она открывалась, после того как убераешь курсор она обратно закрывалась в исходное состояние...
сам смог сделать только так чтобы они по умолчанию были все закрыты, но при навидении и отвода курсора не закрыть ее в исходный вид.
Помогите пожалуйста разобраться, зарание Спасибо!
вот код:
<script src="javascript/jquery.js" type="text/javascript"></script>
|
<ul>
<li>
<a id="a1"><img src="habr.gif" />
<p><strong>Хабрахабр</strong><br/>
Лучший сайт Рунета.</p></a>
</li>
<li>
<a><img src="tut_thumb.jpg" />
<p><strong>jQuery</strong><br/>
JavaScript-фреймворк, фокусирующийся на взаимодействии JavaScript и HTML.
</p></a>
</li>
<li>
<a>
<img src="firefox.png" />
<p><strong>Firefox</strong><br/>
Лучший браузер, попробуйте и убедитесь.
</p></a>
</li>
</ul>
|
ul{
list-style: none;
margin: 0;
padding: 0;
}
ul li{
float: left;
padding: 10px;
display: block;
margin-right: 10px;
}
ul li a{
display: block;
overflow: hidden;
height: 75px;
width: 75px;
}
#a1{
width: 210px;
}
ul li img{
position: absolute;
border: 3px solid #881212;
}
ul li p{
margin: 0;
padding: 0;
width: 120px;
display: block;
margin-left: 85px;
}
|
<script type="text/javascript" >
$(document).ready(function(){
lastBlock = $("#a1");
maxWidth = 210;
minWidth = 75;
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
}
);
});
</script>
|
| |
| |
|
|
| |
|
|
| |
для: nikolai
(13.02.2011 в 22:18)
| | | к событию hover можно навешивать два обработчика .hover( handlerIn(eventObject), handlerOut(eventObject) )
первый как раз будет для того чтоб вкладка открылась (что уже и реализовано), а второй чтоб закрылась (это и надо дописать).
$("ul li a").hover(
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
$(this).animate({width: maxWidth+"px"}, { queue:false, duration:400});
lastBlock = this;
},
function(){
$(lastBlock).animate({width: minWidth+"px"}, { queue:false, duration:400 });
}
);
|
| |
| |
|
|
| |
|
|
| |
для: Crux
(14.02.2011 в 10:50)
| | | Максим, огромное спасибо, работает как часы!! | |
| |
|
|
