您可以在最后
/**
* Method to animate the news feed
*/
function scrollNews() {
// If latest news is not being hovered upon
if (!$('.latestnews').hasClass('hover')) {
// Get the currently visible update
var currentUpdate = $('.theupdates').find('p').filter(':visible').first();
// Get the next update
var nextUpdate = currentUpdate.next();
// If there are no next updates
if (nextUpdate.length === 0) {
// Get the first update and set it as the next update
nextUpdate = $('.theupdates').find('p').filter(':first-of-type');
}
// Animate the current update out
currentUpdate.hide('slow', function() {
// Animate the next update in
nextUpdate.show('slow', function() {
// Delay a little bit and then recursively call this method
window.setTimeout(scrollNews, 2000);
});
});
} else {
// Delay a little bit and then recursively call this method
window.setTimeout(scrollNews, 2000);
}
}
// Handle hover over news
$('.latestnews').on({
'mouseover': function (e) {
$(this).addClass('hover');
},
'mouseout': function (e) {
$(this).removeClass('hover');
}
});
// Start animation
scrollNews();
jsfiddle
啊,这几乎是完美的做了一系列的动画,然后循环回来。我改变了动画以显示和隐藏(更多我想要的东西,但宁可左右滑动)。此外,我切换CSS,所以P和Strong显示:block,因为当jQuery显示它改变为阻止将其推到下面。唯一的问题是一次运行后循环停止,如何连续重复? – Michael 2013-02-08 19:38:03
@Michael你看过最后一个更新的[jsfiddle](http://jsfiddle.net/vAutP/3/)例子吗?它应该不断循环。 – 2013-02-08 19:40:45
这是我正在瞄准的效果的小提琴。略有不同是隐藏/表演。如果我更改为jQuery UI,并且使用幻灯片方向会导致问题,并且出于某种原因文本会跳到下面。 [小提琴](http://jsfiddle.net/vAutP/9/) – Michael 2013-02-08 19:49:51