jQuery Info кутия

Автор: Fakeheal

Кутията съдържа 5 div-a, по един за всеки линк. Всеки div има същата височина с контейнера и overflow-a е hidden. Когато кликнем на линковете, jQuery взима индекса на елемента, който е кликнат и анимира горния margin на контейнера до правилната позиция.

HTML кода:

<div id="example-links">
<a href="#">Пример 1</a>
<a href="#">Пример 2</a>
<a href="#">Пример 3</a>
<a href="#">Пример 4</a>
<a href="#">Пример 5</a>
</div>
<div id="example-content-container">
<div id="example-content">
<div><b>Примерно съдържание 1</b><br />Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer pellentesque varius volutpat. Etiam non neque erat, nec molestie orci. Donec a lacus ut diam semper interdum et quis magna. Donec sagittis quam sit amet dui venenatis malesuada placerat quam facilisis.</div>
<div><b>Примерно съдържание 2</b><br />Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.</div>
<div><b>Примерно съдържание 3</b><br />Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra.</div>
<div><b>Примерно съдържание 4</b><br />Proin pretium purus ac ligula interdum varius. Mauris lobortis, risus id dapibus molestie, ipsum nunc consectetur risus, vel elementum nisi augue aliquet sapien. Phasellus vehicula purus et ante ultrices a mollis velit consectetur. Duis sapien risus, condimentum et pharetra in, sagittis quis felis. Suspendisse ornare odio non augue scelerisque volutpat. Phasellus interdum urna in erat adipiscing fringilla.</div>
<div><b>Примерно съдържание 5</b><br />Ut nisi lacus, mollis id convallis a, accumsan quis nisi. Donec tempus lacinia hendrerit. Mauris fermentum nibh ac mi bibendum laoreet. Sed faucibus libero est, pulvinar aliquet justo. Nullam nisi nisl, sollicitudin vel lobortis id, commodo ut est. Pellentesque tellus mauris, imperdiet id condimentum vitae, condimentum eget ligula. Duis ut lacus magna, non consectetur justo.</div>
</div>
</div>
<div style="clear:both"></div>

Ето и jQuery-то:

$('#example-links a').click(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"}); // умножаване на height+top/bottom padding/margin/border
return false;
});

И CSS-a за примера, който дадох:

#example-links {
border: 1px solid #ccc;
border-bottom: none;
float: left;
width: 200px;
}
#example-links a {
border-bottom: 1px solid #ccc;
display: block;
font-size: 17px;
height: 39px;
line-height: 39px;
padding-left: 10px;
}
#example-links a:focus {
outline: 0;
}
#example-links a:hover {
background-color: #ddd;
}
#example-content-container {
border: 1px solid #ccc;
border-left: none;
height: 200px;
overflow: hidden;
width: 350px;
}
#example-content div {
height: 200px;
padding: 10px;
}

Същия ефект, може да постигнете дори, ако искате кутията да се анимира само при минаване на мишката отгоре (т.е. чрез hover)

$('#example-links a').hover(function(){
var index = $("#example-links a").index(this);
$('#example-content').animate({"marginTop" : -index*220 + "px"});
});

Вашият коментар