jQuery - 周期略有差异

Question

我已经使用循环插件和其他各种，但我不认为他们会在这个例子中工作。我有最新的新闻栏目，是1行。例如：

最新消息 - 这是显示

我通过各种新闻更新需要周期的信息。稍微不同的是我想更新slideRight（隐藏），然后下一个更新slideLeft（显示）。这样，宽度不断变化，最新的新闻标题应该随着更新的收缩和展开而左右移动（因为它是内联的，因此文本的宽度取决于文本）。因此，定位绝对宽度和固定宽度的解决方案无济于事

我猜它的合理简单，但林不知道如何。我可以从CSS开始，只定义要显示的第一个p。然后在jQuery slideright current中，然后next（）slideleft？

http://pastebin.com/2qCQeBMF http://pastebin.com/ERU9K8hC

Answer 1

您可以在最后

/** 
* 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