Всем доброго времени суток
Есть новостной блок и проблема: после первого цикла показа новостей начинает не грамотно выводить остальные циклы (по 2 каждый друг за другом)
Мне кажется, что проблема в скрипте JS, от него ведь эта штука пляшет
Код:
HTML
<ul id="listticker">
<li>
<a href="" class="blog">Первая Новость</a>
<span class="news-text">Rosemary Fell was not exactly beautiful. She was young, brilliant, extremely modern, well dressed and amazingly well read in the newest of the new books</span>
</li>
<li>
<a href="" class="free">Вторая новость</a>
<span class="news-text">Rosemary had been married two years, and her husband was very fond of her. They were rich, really rich, not just comfortably well-off, so if Rosemary wanted to shop, she would go to Paris as you and I would go to Bond Street</span>
</li>
<li>
<a href="" class="help">Третья новость</a>
<span class="news-text">One winter afternoon she went into a small shop to look at a little box which the shopman had been keeping for her. He had shown it to nobody as yet so that she might be the first to see it.</span>
</li>
<li>
<a href="" class="cources">Четвёртая новость</a>
<span class="news-text">"Charming!" Rosemary admired the box. But how much would he charge her for it? For a moment the shopman did not seem to hear. The lady could certainly afford a high price. Then his words reached her, "Twenty-eight guineas, madam."</span>
</li>
</ul>
CSS
#listticker{
height:380px;
width:200px;
overflow:hidden;
padding:2px;
border-bottom-width: 1px;
border-bottom-style: solid;
}
#listticker li{
border:0; margin:0; padding:0; list-style:none;
}
#listticker li{
height:130px;
list-style:none;
}
#listticker a{
color:#000000;
}
#listticker .news-title{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .blog{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
color:#09F;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .free{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
color:#090;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .help{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
color:#FC3;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .cources{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
color:#F93;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .service{
display:block;
font-weight:bold;
margin-bottom:5px;
font-size:16px;
color:#336;
font-family: Arial, Helvetica, sans-serif;
}
#listticker .news-text{
display:block;
font-size:12px;
color:#000;
font-family: Arial, Helvetica, sans-serif;
}
#listticker img{
float:left;
margin-right:5px;
margin-bottom:5px;
}
JQUERY
$(document).ready(function(){
var first = 0;
var speed = 700;
var pause = 5000;
function removeFirst(){
first = $('ul#listticker li:first').html();
$('ul#listticker li:first')
.animate({opacity: 0}, speed)
.slideUp(1000, function() {$(this).remove();});
addLast(first);
}
function addLast(first){
last = '<li style="display:none">'+first+'</li>';
$('ul#listticker').append(last)
$('ul#listticker li:last')
.animate({opacity: 1}, speed)
.fadeIn('slow')
}
interval = setInterval(removeFirst, pause);
});
