Если у вас возникла необходимость добавить на сайт блок со сменяющимся контентом – новостную ленту, но желания писать свой скрипт у вас нет, то в этой статье вы узнаете о решении, которое позволяет осуществить это в несколько строчек jQuery кода.
Идея проста, чтобы её реализовать необходимо, для начала, добавить HTML код нашей новостной ленты:
<ul id="ticker">
<li>
Запись №1
</li>
<li>
Запись №2
</li>
<li>
Запись №3
</li>
<li>
Запись №4
</li>
</ul>
Теперь добавим CSS:
#ticker{
height: 40px;
overflow: hidden;
}
#ticker li{
height: 40px;
}
В каждом из элементов li будет храниться наша запись. Высота должна равняться высоте обертки, в нашем случае ul#ticker, если вам нужно чтобы одна запись была постоянна активна.
Теперь пишем jQuery код, который будет осуществлять нашу задумку:
function tick(){
$("#ticker li:first").slideUp(function(){
$(this).appendTo($("#ticker")).slideDown();
});
};
setInterval(function(){
tick();
}, 5000);
Вот так просто и, главное, без лишнего кода реализуется новостная лента на jQuery. Конечно, вы можете использовать и другие варианты анимации, например смена новостей за счет свойства opacity. Как это работает, можно увидеть в материалах «демо». На данное решение я наткнулся совсем недавно и уже успел применить в нескольких проектах. Думаю, оно будет полезно и другим читателем этой статьи.